0

下面是说明隔离作用域场景的代码。

directivesModule.controller('CustomersController', ['$scope', function ($scope) {

    var counter = 0;
        $scope.customer = {
        name: 'David',
        street: '1234 Anywhere St.'
        };
}]);

directivesModule.directive('myIsolatedScopeWithName', function () {
return {
    scope: {
        name: '@',
    },
    template: 'Name: {{ name }}'
    };
});

我们可以在 HTML 中添加以下代码以访问指令中隔离范围内的 customer.name

<div my-isolated-scope-with-name name="{{ customer.name }}"></div>

现在的问题是我们是否需要在隔离范围内访问多个控制器对象。我们需要在 HTML 中提及所有这些，还是有一种方法可以直接在 JS 中访问它们。？

4

2 回答 2

0

如果您使用 Angular JS 版本 1.3 及更高版本，则有一个名为“bindToController”的属性，您可以在指令中将其设置为 true。这将使定义的所有隔离范围对象/变量都可以访问指令控制器。

directivesModule.directive('myIsolatedScopeWithName', function () { return {
scope: {
    name: '@'
},
template: 'Name: {{ name }}',
bindToController: true };});

然后在控制器中，您可以使用以下方法访问隔离范围变量“name”：

$scope.name

请让我知道这是否是您要找的。

于 2018-01-18T10:20:52.733 回答
0

您可以将整个外部传递$scope给隔离scope指令：

angular.module('app', []).controller('ctrl', function($scope) {
$scope.obj1 = {
  name: 'Tom'
};
$scope.obj2 = {
  amount: 30
};
}).directive('test', function() {
  return {
    scope: {
      parent: '=',
    },
    template: 'Name: {{parent.obj1.name}}, Amount: {{parent.obj2.amount}}'
  };
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl'>
  <div test parent='this'></div>
</div>

您也可以拒绝隔离范围（不在指令中声明）：

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.obj1 = {
    name: 'Tom'
  };
  $scope.obj2 = {
    amount: 30
  };
}).directive('test', function() {
  return {
    template: 'Name: {{obj1.name}}, Amount: {{obj2.amount}}'
  };
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app' ng-controller='ctrl'>
  <div test></div>
</div>

于 2018-01-17T09:03:37.997 回答