javascript - 将指令与 controllerAs 一起使用

Question

据我所知，在“指令定义对象”上使用 Controller 属性会在每次链接给定指令时创建该 Controller 的单独实例吗？

现在玩 controllerAs patterns 我可以看到，当每个指令被编译时， Controller 工厂函数被触发，为 this.data.hello 方法提供不同的结果。

但在我看来，我得到的是该 Controller 的最后一个实例。这是为什么？我错过了什么？

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>

笨蛋: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
          }
      }
  })