0

我以为我已经掌握了使用自定义指令的孤立作用域，然后遇到了这个问题，我已经为此苦苦挣扎了 3 个小时：

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

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

请问有什么想法吗？

Plunker：这里

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';

        }

    };
})
4

3 回答 3

1

请参阅此处的文档-创建包装其他元素的指令：
该示例可能是您所追求的。

对于您的情况，您也可以简单地使用 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

于 2016-10-19T20:37:02.170 回答
1

替换scope: {}为

scope: false,

当前 dom 不可能属于父级，因此它将仅考虑父级范围指令的隔离范围不起作用。

于 2016-10-19T19:15:38.313 回答
0

好像这行得通。有人看到任何缺点吗？

所以在link函数中，传递transclude参数，然后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
    };
})
于 2016-10-19T20:19:49.700 回答