Question

如何读取范围内的info属性等指令值？

<div ng-controller="Controller">
  <my-customer info="naomi"></my-customer>
  <hr>
  <my-customer info="igor"></my-customer>
</div>

例如使用此控制器：

angular.module('docsIsolateScopeDirective', [])
  .controller('Controller', ['$scope', function($scope) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };

    //can I read the info value?
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
        customerInfo: '=info'
      },
      templateUrl: 'my-customer-iso.html'
    };
  });

您可以在plunker上找到它，或在角度documentation中找到类似内容。

Answer 1

要将控制器与指令相关联，您可以使用指令定义对象的controller property。将控制器指定为函数或指定控制器的名称。

Angular App

angular.module('docsIsolateScopeDirective', [])
  .controller('Controller', ['$scope', '$attrs', function($scope, $attrs) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };
    //Here are the attrs values
    console.log($attrs.stars);
    console.log($attrs.info);
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
            starts: '=stars',
            info: '=info'
      },
      //Associate a controller
      controller: 'Controller',
      template: "Name: {{customerInfo.name}} Address: {{customerInfo.address}}"
    };
  });

<强> HTML

<div ng-controller="Controller">
  <my-customer info="naomi" stars="star1"></my-customer>
  <hr>
  <my-customer info="igor" stars="star2"></my-customer>
</div>

(function(angular) {
  'use strict';
angular.module('docsIsolateScopeDirective', [])
  .controller('Controller', ['$scope', '$attrs', function($scope, $attrs) {
    $scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Igor', address: '123 Somewhere' };
    //Here are the attr values
    console.log($attrs.stars);
    console.log($attrs.info);
  }])
  .directive('myCustomer', function() {
    return {
      restrict: 'E',
      scope: {
            starts: '=stars',
            customerInfo: '=info'
      },
      //Associate controller
      controller: 'Controller',
      template: "Name: {{customerInfo.name}} Address: {{customerInfo.address}}"
    };
  });
})(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-directive-isolate-production</title>
</head>
<body ng-app="docsIsolateScopeDirective">
  <div ng-controller="Controller">
  <my-customer info="naomi" stars="star1"></my-customer>
  <hr>
  <my-customer info="igor" stars="star2"></my-customer>
</div>
</body>
</html>

Answer 2

顾名思义，isolated scopes是孤立的，这就是为什么你可以使用双向绑定 - 就像你使用customerInfo: '=info'一样。

在myCustomer指令范围内进行更改时，它会在范围层次结构中冒出来，并会更改控制器中的users对象：

angular.module('docsIsolateScopeDirective', [])
   .controller('Controller', ['$scope', function($scope) {
       $scope.users = [{
                first_name: 'naomi',
                last_name: 'doe'
           },
           {
                first_name: 'igor',
                last_name: 'doe'
           }]
}])

您的模板应如下所示：

<div ng-controller="Controller" ng-repeat="user in users">
    <my-customer info="user"></my-customer>
    <hr>
</div>

Angular指令访问范围内的值

2 个答案: