Question

我一直在学习＆＃34; new＆＃34; ＆＃34;控制器为＆＃34;句法。虽然我发现语法对于可读性来说更清晰，但有时候做一个相对简单的事情就会变得更复杂，例如在向控制器添加指令时。

这个简单的样本将如何使用＆＃34; Controller As＆＃34;语法？

我试过这样的事情：

UINavigationController

我不能像常规＆＃34; $ scope＆＃34;那样工作。句法。也许我错过了什么。

注意：该示例使用Angular 1.5.5

Answer 1

检查你的插件叉子：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}}

模板中的

Answer 2

我无法完全复制官方角度文档中的初始示例。指令非常棘手，我遗漏了一些关于隔离范围“=”的重要信息。我没有通过指令获得控制器的值，而“=”作为原始文档示例。 @ 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。

使用＆＃34;控制器作为＆＃34;向控制器添加指令句法

2 个答案: