频道导航

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

2020-05-03 Angularjs 前端之家

前端之家收集整理的这篇文章主要介绍了angularjs – 将变量传递给指令模板,而不创建新的范围，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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()’，但这不是我想要的。

@H_403_13@

默认情况下，指令不会创建新的范围。如果要显式显示，请向您的指令添加范围：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。