Есть ли способ использовать переменную области контроллера в изолированной области без определения в html/jsp

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

Если вы используете угловой JS версии 1.3 и выше, есть свойство с именем "bindToController", которое вы можете установить в значение true в своей директиве. Это сделает все изолированные объекты / переменные области видимости доступными для контроллера директивы.

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

затем в контроллере вы можете получить доступ к изолированной переменной области name, используя:

$scope.name

Пожалуйста, дайте мне знать, если это то, что вы искали.

Answer 2

Вы можете пройти весь внешний $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>