Question

我创建了一个带有隔离范围的指令my-directive，但看起来它能够访问其div1的属性$rootScope和其父范围的属性div2 { {1}}的{1}}。

我错过了什么？

使用Javascript：

$scope

HTML：

controller1

输出：

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

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

Answer 1

范围在指令的模板中被隔离。为您的指令提供模板或编写链接函数，您将看到范围是隔离的。当你访问指令范围的祖先时，这发生在指令之外，然后解析的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: '@'，因为它只是一个字符串。

Answer 2

您应该在指令中使用transclude函数，否则该值将绑定到父作用域。检查一下：http://pucksart.com/transclude-big-mistery/

具有隔离范围的指令意外访问父作用域

2 个答案: