Angularjs 使用“添加指令到控制器”；控制器为；语法

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

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

我试过这样的方法：

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检查您的叉子：

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);

及

---

在模板中，我无法完全复制官方文档中的初始示例。指令非常棘手，我遗漏了一些关于隔离作用域“=”的重要信息。我没有通过原始文档示例中带有“=”的指令从控制器获取值@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];
            }
    };
  });

})();

---

以下是问题的答案。

问题正文中的代码暗示指令模板有相应的控制器，但Plunk没有。那么，你想让我们看哪一个？如果您的指令模板有相应的控制器，那么代码在哪里？对不起，我刚刚更正了它。Plunk是Angular官方文档中的一个示例，我尝试使用下面的“controller as”语法对其进行编码。可能是重复。看看这个问题：@MikeFeltman说起来容易，检查起来难。我觉得这不是重复，我只是想礼貌一点。对此我深表歉意。那一顿不适合我。无论如何，它没有使用“controller as”语法。随附的Plunk I来自官方angular文档，显示了常见的“$scope”语法。也许你没有保存你的Plunk的最新版本。你能看到这个版本吗，查看更新后的postSorry@shershen，但您添加的代码似乎没有任何作用。我把它取了下来，留下来做最后一个。无论如何，我需要用“Controller As”语法来完成。天哪！，我已经忘记了-

bindToController:true

现在检查更新的代码我明白你的意思了，但它仍然混合了这两种语法。我发布了我的纯“controller as”语法。

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

(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];
            }
    };
  });

})();