从指令访问控制器中设置的变量

Accessing variables set in the controller from the directive

我试图避免在我的 angular 控制器中使用 $scope(如最佳实践教程 中所建议)。在控制器中,我正在设置 testVariable。在指令中,我返回模板,包括 testVariable,但是这个添加的变量不输出任何值。此代码基于我在 AngularJS 文档中找到的内容。

下面是我的 javascript 代码:

(function(angular) {
  'use strict';
  angular.module('docsSimpleDirective', [])
    .controller('Controller', ['$scope', function($scope) {
      var _controller = this;

      $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
      };

      _controller.testVariable = "Test Variable!"
    }])
    .directive('myCustomer', function() {
      return {
        template: 'Name: {{customer.name}}<br />Address: {{customer.address}}<br />Value Here: {{ testVariable }}'
      };
    });
})(window.angular);

这里是 HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Example - example-directive-simple-production</title>

    <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-app="docsSimpleDirective">
    <div ng-controller="Controller">
      <div my-customer></div>
    </div>
  </body>
</html>

我为此设置了一个 plunkr here

如果您使用 controllerAsbindToController 它将简化您的指令然后访问 testVariable

angular.module('docsSimpleDirective', [])
  .controller('Controller', [function () {
    this.customer = {
      name: 'Naomi',
      address: '1600 Amphitheatre'
    };

    this.testVariable = "Testing data here!"
  }])
  .directive('myCustomer', function () {
    return {
      template: 'Name: {{$ctrl.customer.name}}<br />Address: {{$ctrl.customer.address}}<br />Value Here: {{ $ctrl.testVariable }}',
      controller: 'Controller',
      controllerAs: '$ctrl',
      bindToController: true
    };
  });

如果您使用 .component 创建 docsSimpleDirective

,您可以进一步简化您的指令