angularjs – 将变量传递给指令模板,而不创建新的范围

发布时间：2020-12-17 08:22:22 所属栏目：安全来源：网络整理

导读：有没有办法使用属性将变量传递给指令而不创建新的范围？ HTML div ng-click='back()' button='go back'/div JS .directive('button',function () { return { scope: { button: '@' },template: "divdiv another-directive/div{{button}}/div",replace: true

有没有办法使用属性将变量传递给指令而不创建新的范围？

HTML

<div ng-click='back()' button='go back'></div>

.directive('button',function () {
    return {
        scope: {
            button: '@'
        },template: "<div><div another-directive></div>{{button}}</div>",replace: true
    }
})

问题是ng-click =’back()’现在引用指令范围。
我仍然可以做ng-click =’$ parent.back()’，但这不是我想要的。

默认情况下，指令不会创建新的范围。如果要显式显示，请向您的指令添加范围：false：

<div ng-click='back()' button='go back!'></div>

angular.module('myApp').directive("button",function () {
    return {
        scope: false,// this is the default,so you could remove this line
        template: "<div><div another-directive></div>{{button}}</div>",replace: true,link: function (scope,element,attrs) {
           scope.button = attrs.button;
        }
    };
});

fiddle

由于在范围上创建了一个新的属性按钮，所以通常应该使用范围为true创建一个新的子范围：true，因为@ ardentum-c在他的答案中。新范围将从父范围为prototypially inherit，这就是为什么您不需要将$ parent.back()放入HTML中。

另外一个提到：即使我们使用replace：true，点击元素仍然回调()。这是因为“替换过程将所有属性/类从旧元素迁移到新元素。 – directive doc所以ng-click =’back()’button =’回去！被迁移到指令的模板中的第一个div。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!