如何使用隔离范围设置范围参数答案

【问题标题】：How to set scope parameters with isolated scope如何使用隔离范围设置范围参数
【发布时间】：2017-03-01 14:03:20
【问题描述】：

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

一旦为指令创建了隔离作用域，我认为您可以在controller 或link 函数中设置任何作用域数据（在本例中为greeting）。但是在 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';

        }

    };
})

【问题讨论】：

标签： angularjs angularjs-scope isolate-scope

【解决方案1】：

将scope: {} 替换为

scope: false,

当前的 dom 不可能属于父级，因此它会认为只有父级作用域指令的隔离作用域不起作用。

【讨论】：

是的，这可行，但我希望隔离作用域而不是继承/共享父作用域，在这种情况下，我相信它是 root。
啊，因为 DOM 已经被渲染到 DOM 的那部分范围，所以不能更改，对吧。所以也许我可以在定义对象中使用 transcendent 来克隆和重新插入内容，但新内容引用新范围？
抱歉，我的上一条评论写得不太好，由于某种原因它不允许我编辑。我的意思是问是否使用 transclude 可能是一个解决方案？
transclude 在这里不是正确的概念，因为 transclude 在指令内部而不是外部起作用。

【解决方案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>

您不必触摸链接功能或做任何开箱即用的操作。

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

【讨论】：

【解决方案3】：

似乎这样有效。有没有人觉得有什么缺点？

所以在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
    };
})

【讨论】：