Question

以下是说明隔离范围方案的代码。

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中访问它们。？

Answer 1

您可以将整个外部$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>

Answer 2

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

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

然后在控制器中，您可以使用：

访问隔离的范围变量“name”

$scope.name

如果您正在寻找，请告诉我。

有没有办法在隔离范围内使用控制器范围变量而无需在html / jsp中定义

2 个答案: