У вас есть динамический HTML-элемент, использующий директиву AngularJS WHITOUT $ scope?

0

Я хочу использовать этот пример кода Plunker для динамического добавления некоторых элементов на HTML-страницу с помощью AngularJS. (Вы должны запустить его по новой ссылке, а не в среде редактора). Это мой первый опыт в объявлении директивы AngularJS (за исключением простых тестов). У меня есть два вопроса по этому образцу:

  1. Мой подход использует Controller as не $Scope в моих контроллерах. (Я не знаю названия этого подхода!) Итак, что мне делать с примером кода выше? поскольку он использует $compile(...)($scope). какие изменения следует применять?
  2. Является ли область действия директивы связанной с контроллером? Итак, если я могу опустить область действия контроллера в этом случае, должен ли я применять какие-либо изменения в директиве?
Теги:
angularjs-scope
angularjs-directive
angularjs-controlleras

2 ответа

0
Лучший ответ

1) Когда используется contrller как синтаксис, поэтому для $compile(...)($scope) изменится на $compile(...)(vm). а также для всех функций и переменных вместо $ scope использовать vm или this

var vm = this;

поэтому вместо $scope.list использовать vm.list и для функции также использовать.

  $scope.do = function() ..

  vm.do = function() ....

2) В директиве add controllerAs нравится это

  app.directive('myDirective', function () {
   return {
   scope: {},
   controller: function () {
     this.name = 'Elnaz'
   },
   controllerAs: 'ctrl',
   template: '<div>{{ctrl.name}}</div>'
  };
});

и если вы хотите обратиться к внешнему контроллеру, используйте это

   app.directive('myDirective', function () {
     return {
     restrict: 'A',
     controller: 'EmployeeController',
     controllerAs: 'ctrl',
     template: ''
    };
 });

на ваш взгляд, измените вот так:

  <div ng-controller="myController as ctrl">
     {{ctrl.name}}

     <button type="button" ng-click="ctrl.do()">Do</button>
  </div>

Изменение: работает демонстрация

Поделиться
  • 0
    большое спасибо. Но у меня есть несколько вопросов: как вы видите, в директиве есть контроллер, который ввел $ scope, что мне с этим делать? связано ли $ scope с $ scope контроллера? Вы опустили собственный контроллер директивы и myController в определении директивы EmployeeCtrl?
  • 0
    см мой обновленный ответ.
Показать ещё 4 комментария
0

Ответ на ваш первый вопрос:

  1. Внутри вашего контроллера вы создали бы одну переменную, которая будет представлять собой "контроллер как";

    var vm = this;

  2. Теперь все свойства, привязанные к $ scope, теперь будут частью vm

  3. В HTML: способ связывания контроллера с div: <div ng-controller="customCntrl as vm"
  4. Теперь в представлении вместо прямого ссылки на свойства области вам нужно будет префикс vm до этого следующим образом: vm.name

  5. В директиве: Способ связывания контроллера с "контроллером как":

    app.directive('customDir', function() {return {controller: 'customCntrl', controllerAs: 'vm',...

                }
        }); 

                }
        });

Answer to your 2nd point: Ответьте на второй пункт:

  1. You can still apply broadcast and emit over 'vm' like this: Вы все же можете использовать трансляцию и излучать по 'vm' следующим образом:

    $scope.$watch('vm.name', function() { $scope.$broadcast('topic-123', 'msg'); }); $ scope. $ watch ('vm.name', function() {$ scope. $ broadcast ('topic-123', 'msg');});

    И захватить его: $ scope. $ On ('topic-123', function (event, msg) {});

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню