使用“Controller as”语法向控制器添加指令答案

【问题标题】：Adding a Directive to a Controller using "Controller as" syntax使用“Controller as”语法向控制器添加指令
【发布时间】：2016-09-20 17:24:30
【问题描述】：

我一直在学习“新的”“Controller as”语法。虽然我发现语法更清晰易读，但有时做相对简单的事情会变得更复杂，例如向控制器添加指令时。

如何使用“Controller As”语法完成这个简单的示例？

Plunk Sample

我尝试过这样的事情：

app.directive('myCustomer', myCustomer);

function myCustomer() {
    return {
      restrict: 'E',
      scope:{ customer: '=info'},
      //templateUrl: 'my-customer.html',
      template:'Name: {{vm.customer.name}} Address: {{vm.customer.address}}',
      controller: Controller,
      controllerAs: 'vm',
      bindToController: true 
    };
  }

我不能让它像常规的“$scope”语法那样工作。也许我错过了什么。

注意：示例使用 Angular 1.5.5

【问题讨论】：

问题正文中的代码暗示您的指令模板具有相应的控制器，但您的 plunker 没有。那么，您希望我们看哪一个？如果你的指令模板有对应的控制器，那它的代码在哪里？
对不起，我刚刚更正了。 Plunk 是 Angular 官方文档中的一个示例，我尝试使用 John Papa style guide 之后的“控制器为”语法对其进行编码。
可能的欺骗。看到这个问题：stackoverflow.com/questions/31857735/…
@MikeFeltman 说起来容易做起来难。恕我直言，它没有重复
我只是想保持礼貌。对此我深表歉意。

标签： angularjs angularjs-directive

【解决方案1】：

检查你的 plunk 的这个分支：https://plnkr.co/edit/7iA3JMhuUlvIQN9ORs81?p=preview

.directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        customerInfo: '=info'
      },
      controllerAs: 'vm',
      controller: ['$scope', function(scope){
        console.log(scope.customerInfo);
      }],
      templateUrl: 'my-customer-iso.html'
    };
  });

UPD

代码应该是这样的：

(function(angular) {
  'use strict';
angular.module('docsIsolateScopeDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        customerInfo: '=info'
      },
      controllerAs: 'vm',
      bindToController: true, //the  missing line!!
      controller: 'dirCtrl',
      templateUrl: 'my-customer-iso.html'
    };
  })
  .controller('dirCtrl', ['$scope', dirCtrl]);

  function dirCtrl() {
    //var vm = this; //no need in this!
}

})(window.angular);

和

 Name: {{vm.customerInfo.name}} Address: {{vm.customerInfo.name}}

在模板中

【讨论】：

Plunk 不适合我。无论如何，它没有使用“控制器作为”语法。我附加的 Plunk 来自官方 angular 文档，并显示了通常的“$scope”语法。也许您没有保存最新版本的 Plunk。
你能看到这个版本吗？ plnkr.co/edit/7iA3JMhuUlvIQN9ORs81?p=preview，查看更新的帖子
对不起@shershen，但您添加的代码似乎什么也没做。我删除了它并将其保留为original version。无论如何，我需要使用“Controller As”语法来完成。
天哪！，我已经忘记了这个 - bindToController: true 现在检查更新的代码
我明白你的意思，但它仍然混合了两种语法。我发布了我纯粹的“控制器为”语法。

【解决方案2】：

我无法完全复制官方 Angular 文档中的初始示例。指令非常棘手，我错过了有关隔离范围“=”的重要内容。我没有通过使用“=”作为原始文档示例的指令从控制器获取值。 @shershen 的答案是正确的。

(function() {

  'use strict';
  var app= angular.module('docsIsolateScopeDirective', []);

  app.controller('Controller', [function() {
    var vm=this;
    vm.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    vm.igor = { name: 'Igor', address: 'Homeless' };

    vm.name="John";
  }]);

  app.directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {

      },
      templateUrl: 'my-customer-iso.html',
      controller: 'Controller',
      link: function(scope, elem, attr, ctrl) {
                var variableName=attr.info;
                scope.customerInfo=ctrl[variableName];
            }
    };
  });

})();

这里是final plunk。

【讨论】：