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

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

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

javascript angularjs angularjs-directive angularjs-scope angularjs-controlleras
person Elnaz    schedule 18.05.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

var vm = this;

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

  $scope.do = function() ..

  vm.do = function() ....

2) В директиве добавить 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>

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

person Hadi J    schedule 18.05.2016
comment
Огромное спасибо. Но у меня есть несколько вопросов: как вы видите, в директиве есть контроллер, который внедрил $scope, что мне с этим делать? $scope связан с $scope контроллера? Вы пропустили собственный контроллер директивы и myController в определении директивы EmployeeCtrl? - person Elnaz; 18.05.2016
comment
см. этот образец, который может помочь вам обновить измененное содержимое формы"> stackoverflow.com/questions/37096954/ - person Hadi J; 18.05.2016
comment
Да, я использую этот подход (контроллер как) ввиду. но также я не понимаю, что мне делать с директивой. Как вы видите в примере plunker, директива имеет свой собственный контроллер, и нужны оба контроллера. Но, как вы упомянули выше, я могу выбрать один из них в качестве контроллера, а затем определить контроллер как для этого. - person Elnaz; 18.05.2016
comment
Я создал демо plunker. см. plnkr.co/edit/az1ut50jsTph3tVgaSWm?p=preview - person Hadi J; 18.05.2016

arrow_upward
0
arrow_downward

Ответ на ваш 1-й пункт:

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

    вар вм = это;

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

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

  5. В директиве: способ связать контроллер с «контроллером как»:

    app.directive('customDir', function() { return { контроллер: 'customCntrl', controllerAs: 'vm', ...

                }
        });

Ответ на ваш 2-й пункт:

  1. Вы все еще можете применять широковещательную передачу и излучать через «vm» следующим образом:

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

    И чтобы зафиксировать это: $scope.$on('topic-123', function(event, msg) {});

person Suneet Bansal    schedule 18.05.2016