Блог

Главная - Вопросы по программированию - Директива с изолированной областью неожиданно обращается к родительским областям

Директива с изолированной областью неожиданно обращается к родительским областям

#angularjs #angularjs-directive #angularjs-scope

#angularjs #angularjs-директива #angularjs-область

Вопрос:

Я создал директиву my-directive с изолированной областью, но похоже, что она может получить доступ к свойству div1 $rootScope и свойству div2 своей родительской области $scope controller1 .

Чего мне не хватает?

Javascript:

 angular.module('app', [])
        .controller('controller1', ['$scope',
            function ($scope) {

            }])
        .directive('myDirective', [
            function () {
                return{
                    restrict: 'A',
                    replace: true,
                    scope: {
                        myDirective:'='
                    }
                };
            }]);

HTML:

 <body>
    <div id="1" ng-app="app" ng-init="div1='div1'">
        <div id="2" ng-controller="controller1" ng-init="div2='div2'">
            <div id="4" my-directive="value" ng-init="div4='div4'">
                {{div4}}<br/>
                {{div1}}<br/>
                {{div2}}<br/>
            </div>
        </div>
    </div>
</body>

Вывод:

 div4
div1
div2

Комментарии:

1. Где внутри директивы вы пытаетесь получить доступ к этим другим значениям?

2. @MattWay, я пытаюсь получить доступ к другим областям в <div id=»4″></div> . Я объявил свою директиву для этого div. Итак, я предположил, что этот div получает область, изолированную в его тегах.

Ответ №1:

Вы должны использовать функцию transclude внутри директивы, иначе эти значения будут привязаны к родительской области. Проверьте это: http://pucksart.com/transclude-big-mistery /

Ответ №2:

Область изолирована в шаблоне директивы. Дайте вашей директиве шаблон или напишите функцию ссылки, и вы увидите, что область изолирована. Когда вы получаете доступ к предкам области действия директивы, это происходит за пределами директивы, а затем проанализированный html «включается» в ваш шаблон директивы, который в противном случае пуст.

Однако это интересный вопрос. До сих пор я не понимал, что исключение шаблона директивы фактически равносильно включению transclude: true, template: '<div ng-transclude></div>' в определение директивы.

Хотя вы не включили два из этих свойств, вы действительно сделали это:

 .directive('myDirective', [
        function () {
            return{
                restrict: 'A',
                replace: true,
                transclude: true,
                template: '<div ng-transclude></div>',
                scope: {
                    myDirective:'='
                }
            };
        }]);

Также myDirective: '=' следует отметить myDirective: '@' , что это просто строка.