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

Question

Я имею немного трудно понять следующий code

HTML

<div my-example max="77"></div> 

Директива

 angular 
      .module('app') 
      .directive('myExample', myExample); 

     function myExample() { 
      var directive = { 
       restrict: 'EA', 
       templateUrl: 'app/feature/example.directive.html', 
       scope: { 
        max: '=' 
       }, 
       link: linkFunc, 
       controller: ExampleController, 
       controllerAs: 'vm', 
       bindToController: true // because the scope is isolated 
      }; 

      return directive; 

      function linkFunc(scope, el, attr, ctrl) { 
       console.log('LINK: scope.min = %s *** should be undefined', scope.min); 
       console.log('LINK: scope.max = %s *** should be undefined', scope.max); 
       console.log('LINK: scope.vm.min = %s', scope.vm.min); 
       console.log('LINK: scope.vm.max = %s', scope.vm.max); 
      } 
     } 

     ExampleController.$inject = ['$scope']; 

     function ExampleController($scope) { 
      // Injecting $scope just for comparison 
      var vm = this; 

      vm.min = 3; 

      console.log('CTRL: $scope.vm.min = %s', $scope.vm.min); 
      console.log('CTRL: $scope.vm.max = %s', $scope.vm.max); 
      console.log('CTRL: vm.min = %s', vm.min); 
      console.log('CTRL: vm.max = %s', vm.max); 
     } 

HTML

 <!-- example.directive.html --> 
     <div>hello world</div> 
     <div>max={{vm.max}}<input ng-model="vm.max"/></div> 
     <div>min={{vm.min}}<input ng-model="vm.min"/></div> 

Почему scope.vm.min определяется в linkFunc? Поддерживает ли функция связи общий объем контроллера? Тем не менее, почему vm автоматически добавляется в область без явного назначения, например $scope.vm = vm?

Answer 1

vm хранится в $ scope контроллера. Используя это в директиве, мы используем область видимости вместо $ scope. Таким образом, в этом случае, поскольку «vm» - это $ scope контроллера, он такой же, как и объем директивы. И ссылка использует это, передавая область в параметре для linkFunc. А также как директива использует контроллер, тот же объем переносится на функцию связи. Таким образом, мы можем напрямую использовать scope.vm.min и любые другие вещи. Надеюсь, вы поняли.

Answer 2

vm автоматически добавляется в область действия из-за синтаксиса controllerAs в вашей директивной конфигурации.

return { 
    controller: Controller 
    controllerAs: 'vm' 
}; 

controllerAs синтаксис создает экземпляр вашей функции контроллеров и все на this объект будет выставлен на объем через псевдоним данных в значении controllerAs. vm существует в вашей функции link, потому что в вашем контроллере и в вашей функции связи у вас есть тот же $scope вашей директивы. Это не «общий», но это то же самое. Когда команда скомпилирована, она получает новую новую область $, с которой можно работать. Во время компиляции контроллер приходит и прикрепляет некоторую информацию к области. И когда директива полностью отображается, функция link активируется, и в параметре функции предоставляется тот же $scope. Вот почему у вас есть доступ к vm в функции link. И независимо от того, что вы заявляете в своем представлении, например, ng-model=vm.min, оно также будет прикреплено к vm.

Более наглядное представление (приблиз) о том, что происходит Whe Угловая компилирует директиву:

// First step preparing the new scope and the directive configuration 
var $newScope = $rootScope.$new(true); // true for isolated scope 
var directiveConfig = { 
    controller: Controller, 
    controllerAs: 'vm', 
    link: function(scope, elem) { ... } 
} 

// Attaching the new controller instante to your new scope 
$newScope[directiveConfig.controllerAs] = new directiveConfig.controller(); 
// At this point, we have the scope.vm 
//Compile the directive to recieve the rendered element attach to the DOM 
var elem = $compile('<my-directive></my-directive')($newScope); 
// At this point, our scope.vm now contains scope.vm min and scope.vm.max because of the ng-model 
// Call the link function with the newScope and the newly renrered element 
directiveConfig.link.call(null, $newScope, elem); 

Answer 3

настоятельно рекомендуем вам изучить основы директив http://www.sitepoint.com/practical-guide-angularjs-directives/

также виртуальная машина ничего, но вы должны использовать controlleras синтаксис, чтобы они имели в виду

это

в качестве примера контроллера