Блог

Это мой источник информации:

«Опция controllerAs позволяет нам установить псевдоним контроллера, что позволяет нам публиковать наш контроллер под этим именем и предоставляет доступ к области действия имени controllerAs. Этот шаг позволяет нам ссылаться на контроллер изнутри представления и даже позволяет нам вводить $scope .

Этот вариант может показаться тривиальным, но он дает нам много возможностей в том, как мы можем использовать и создавать анонимные контроллеры в наших маршрутизаторах и директивах. Эта мощь позволяет нам создавать динамические объекты как контроллеры, которые изолированы и просты в тестировании.

Например, мы можем создать анонимный контроллер в директиве следующим образом: »

 var myApp = angular.module("myApp",[]);
myApp.directive('myDirective', function(){
  return{
    restrict: 'A',
    template: '<h4> {{myController.msg}} </h4>',
    controllerAs: 'myController',
    controller: function(){
      this.msg = "Hello world";
    }
  };
});
 

Какова функциональность анонимных контроллеров?

Эквивалентный код без контроллеров будет выглядеть примерно так:

 var myApp = angular.module("myApp",[]);
myApp.directive('myDirective', function(){
  return{
    restrict: 'A',
    template: '<h4> {{myController.msg}} </h4>',
    controller: function($scope){
      $scope.myController = this;
      this.msg = "Hello world";
    };
});
 

Вы можете использовать что-то подобное, чтобы улучшить пространство имен для вложенных директив. Итак, если у вас есть родительский и дочерний контроллеры, вместо того, чтобы указывать свойство типа ‘name’ в области видимости каждого, вы можете присвоить имя фактическому контроллеру (this.name = ‘имя’), а затем получить доступ к этим именам из контроллеров, назначенных области:

 myApp.directive('myParentDirective', function(){
  return{
    restrict: 'A',
    template: '<div class="parent"><div my-child></div></div>',
    controllerAs: 'parent'
    controller: function($scope){
      this.name = "parent";
  };
}).directive('myChildDirective', function(){
  return{
    restrict: 'A',
    template: '<div class="child">parent name ="{{ parent.name }}"</div>'  
              '<div class="child">child name = "{{ child.name }}"</div>',
    controllerAs: 'child'
    controller: function($scope){
    this.name = "child";
  };
});