Использование директив с контроллером

Question

Насколько я знаю, использование свойства контроллера в «Объекте определения директивы» будет создавать отдельный экземпляр этого контроллера каждый раз, когда данная директива связана?

Теперь, играя с контроллером В качестве паттеров я вижу, что при компиляции каждой из директив запускается заводская функция контроллера, дающая другой результат для метода this.data.hello.

Но, на мой взгляд, я получаю последний экземпляр этого контроллера. Почему это? Что мне не хватает?

JS

angular.module('app', []) 
    .controller('customCtrl', function() { 
     console.log('controller'); 

     this.data = { 
      hello: Math.floor(Math.random() * 200 + 1) 
     }; 
    }) 
    .directive('customDrv', function() { 
     var linkFn = function (scope, element, attrs, ctrl) { 
      console.log('link'); 
      console.log(ctrl.data.hello); 
     }; 

     return { 
      templateUrl: 'Home/CustomDrv', 
      restrict: 'E', 
      controller: 'customCtrl', 
      controllerAs: 'vm', 
      compile: function (element, attrs) { 
       console.log('compile'); 

       return linkFn 
      } 
     } 
    }) 

Html

<custom-drv></custom-drv> 
<custom-drv></custom-drv> 
<custom-drv></custom-drv> 
<custom-drv></custom-drv> 

Plunker: https://plnkr.co/edit/HII9a7Ff6ryXuz6Fgzr6

Answer 1

Чтобы получить другой результат this.data.hello метод создания изолированной сферы, как -

angular.module('app', []) 
    .controller('customCtrl', function() { 
     //console.log('controller'); 

     this.data = { 
      hello: Math.floor(Math.random() * 200 + 1) 
     }; 
    }) 
    .directive('customDrv', function() { 
     var linkFn = function (scope, element, attrs, ctrl) { 
      //console.log('link'); 
      console.log(ctrl.data.hello); 
     }; 

     return { 
      template: '<h1>{{vm.data.hello}}</h1>', 
      restrict: 'E', 
      scope: {}, 
      controller: 'customCtrl', 
      controllerAs: 'vm', 
      compile: function (element, attrs) { 
       //console.log('compile'); 

       return linkFn 
      } 
     } 
    }) 

Answer 2

this.data = { 
     hello: Math.floor(Math.random() * 200 + 1) 
    } 

Наборы data.hello только один раз (при загрузке контроллера). Если вы хотите другой результат каждый раз, вы бы сказали:

this.data = { 
     hello: function(){ 
     return Math.floor(Math.random() * 200 + 1); 
     } 
    } 

и вызвать его с

ctrl.data.hello() 

Работа plunkr

Однако вы, вероятно, хотите передать hello функцию через связывание и не доступ к нему непосредственно из директивы (более совершенная практика):

Разметка:

<custom-drv hello="hello"></custom-drv> 

Директива:

.directive('customDrv', function() { 
    var linkFn = function (scope, element, attrs, ctrl) { 
     console.log('link'); 
     console.log(ctrl.hello); 
    }; 

    return { 
     template: '<h1>{{vm.hello()}}</h1>', 
     restrict: 'E', 
     scope: { 
     hello: '&' //represent function binding 
     } 
     controller: 'customCtrl', 
     controllerAs: 'vm', 
     compile: function (element, attrs) { 
      console.log('compile'); 

      return linkFn 
     } 
    } 
})