Несколько вопросов относительно controllerAs

Question

Насколько я прочитал все вопросы в SO, я еще несколько вопросов здесь вокруг controllerAs, используя общую директиву виджета ниже в качестве примера

var app = angular.module('test') 
app.directive('genericDirective', function(){ 
    return { 
     restrict:'E', 
     templateUrl: someUrlHere, 
     scope: { someScopeHere }, 
     controllerAs: 'vm', 
     bindToController: true, 
     controller: function(){ 
     someControllerHere 
     } 
    } 
}) 

и шаблона для вышеуказанной директивы является

<div>{{info1}} {{info2}} {{info3}}</div> 

и говорят, что есть, как несколько директив выше (genericDirective2, genericDirective3 и так далее), который использует такую ​​же установку, как описано выше. Моя идея здесь, чтобы иметь общую директиву, которая может быть плагин в любом виде и работает с любыми контроллерами, которые обрабатывают мнение, которое выше директива находится.

Так сказать, если у меня есть макет ниже

<div id="someId" ng-controller="thisController"> 
    <!-- Widget one --> 
    <generic-directive1></generic-directive1> 
    <!-- Widget two --> 
    <generic-directive2></generic-directive2> 
    <!-- Widget three --> 
    <generic-directive3></generic-directive3> 
</div> 

Предположим, что thisController получает JSON, который содержит все данные, необходимые для визуализации каждого директивы соответственно

{ 
    "generic-directive-1": { 
     "id": "someId1", 
     "class": "someClass1", 
     "data": { 
      "info1":"someInfo1-1", 
      "info2":"someInfo1-2", 
      "info3":"someInfo1-3" 
     } 
    }, 
    "generic-directive-2": { 
     "id": "someId2", 
     "class": "someClass2", 
     "data": { 
      "info1":"someInfo2-1", 
      "info2":"someInfo2-2", 
      "info3":"someInfo2-3" 
     } 
    }, 
    "generic-directive-3": { 
     "id": "someId3", 
     "class": "someClass3", 
     "data": { 
      "info1":"someInfo3-1", 
      "info2":"someInfo3-2", 
      "info3":"someInfo3-3" 
     } 
    } 
} 

Как я могу сделать так, чтобы

• thisController может получить доступ к определенному genericDirective с помощью controllerAs (в данном случае с использованием controllerAs: 'vm'), скажем, если я хочу передать определенные параметры из этого контроллера в generic-директиву-3, как я могу это сделать?
• Правильная директива получит правильные данные от thisController? Поскольку я устанавливаю все директивы с контроллеромAs: 'vm'.
• Нужно ли мне использовать другое имя контроллера для каждой директивы? Как 2-3 директивы с одним и тем же контроллером могут использоваться на странице, а контроллер страницы может ссылаться на неправильную директиву?

Answer 1

Как я могу сделать так, чтобы thisController доступ к конкретным genericDirective с использованием controllerAs (в данном случае с помощью controllerAs: «ВМ»), скажем, если я хочу передать определенные параметры из thisController в generic-directive-3, как я могу это сделать?

Поскольку вы не используете компоненты, самым чистым способом обмена данными между контроллерами является использование служб. You also have other choices.

В случае директив, вы можете/должны передавать данные через атрибуты:

<div id="someId" ng-controller="thisController"> 
    <generic-directive1 data="obj.generic-directive-1"></generic-directive1> 
    <generic-directive2 data="obj.generic-directive-2"></generic-directive2> 
    ... 
</div> 

Эти данные будут связаны с областью директивы или контроллера Директивами, игровая. Я бы не personnaly использовать их вместе, как это может привести к путанице:

return { 
     restrict:'E', 
     template: '<p>{{data.id}}</p>', 
     scope: { data: '=' } 
    } 

или

return { 
     restrict:'E', 
     template: '<p>{{vm.data.id}}</p>', 
     bindToController: { 'data: '=' }, 
     controllerAs: 'vm', 
     controller: function() { 
     console.log(this.data); //data is bound to the controller 
     } 
    } 

Право директивы получит правильные данные от thisController? Начиная с я устанавливаю все директивы с контроллеромAs: 'vm'.

Директива будет получать данные через область действия, если используется изолированная область или непосредственно через контроллер, если используется bindToController.

Нужно ли мне использовать другое имя контроллера для каждой директивы? Как 2-3 директивы с одним и тем же контроллером могут использоваться в пределах страницы, а контроллер страницы может ссылаться на неправильную директиву ?

Вам не нужно использовать другое имя для свойства controllerAs, поскольку оно используется только внутри директивы.

Однако для того, чтобы избежать повторения кода контроллера, вы не можете объявить его как п анонимной функции внутри директивы, а вот так:

function UniqueController() { 
    console.log("hello"); 
} 

function myDirective1() { 
    return { 
     restrict:'E', 
     template: '<p>{{vm.data.id}}</p>', 
     bindToController: { 'data: '=' }, 
     controllerAs: 'vm', 
     controller: UniqueController 
    } 
} 

angular.module('mymodule', []); 
angular.module('mymodule') 
    .directive('myDirective1', myDirective1) 
    .directive('myDirective2', myDirective2) 
    .controller('UniqueController', UniqueController);