Question

我以为我已经掌握了使用自定义指令的孤立范围，然后遇到了这个问题，我现在已经奋斗了3个小时了：

为指令创建隔离范围后，我认为您可以在greeting或controller函数中设置任何范围数据（在本例中为link）。但是，引用HTML中的{{greeting}}不起作用，即使greeting在通过控制台检查时显示在范围内？

我认为新的隔离范围将分配给指令myDir，并且在<my-dir>的HTML内容中可以访问在该范围上定义的任何内容。显然，我在理解方面存在差距。

有什么想法吗？

Plunker：here

HTML：

<my-dir>
    Greeting: {{greeting}}
</my-dir>

JS：

var app = angular.module('myApp', []);

app.directive('myDir', function() {

    return {
        restrict: 'EA',
        scope: {},
        controller: ['$scope', function ($scope) {

            $scope.greeting = 'Hello';
            //this.greeting = 'Hello';

        }],
        link: function(scope, element, attrs){

          //scope.greeting = 'Hello';

        }

    };
})

Answer 1

用

替换scope: {}

scope: false,

当前dom不可能属于父级，所以它只会考虑父级范围directice的孤立范围不起作用。

Answer 2

请参阅docs here - Creating a Directive that Wraps Other Elements：
这个例子就是你可能会追求的。

对于你的情况，你可以简单地使用ng-transclude，将Greeting {{greeting}}移动到你在my-dir指令定义中定义的模板。

JS中的指令定义

        app.directive('myDir', function() {

            return {
                restrict: 'EA',
                scope: {},
                controller: function ($scope) {
                    $scope.greeting = 'Hello';
                },
                template: 'Greeting: {{greeting}}',
                link: function(scope, element, attrs){

                  //scope.greeting = 'Hello';

                }

            };
        })

HTML

<my-dir></my-dir>

您不必触摸链接功能或开箱即用。

工作plunkr：https://plnkr.co/edit/08tFyy?p=preview

Answer 3

似乎这样有用。有人看到任何缺点吗？

因此，在link函数中，传递transclude参数，然后为transcluded元素设置scope，因此：

app.directive('myDir', function() {
    return {
        restrict: 'EA',
        scope: {},
        controller: ['$scope', function ($scope) {

            $scope.greeting = 'Hello';

        }],
        link: function(scope, element, attrs, ctrl, transclude){

            transclude(scope, function(clone) {
                element.append(clone);
            });

        },
        transclude: true
    };
})

如何使用隔离范围

3 个答案: