Passing variable to directive template without creating new scope

后端 未结 2 1226
陌清茗
陌清茗 2021-02-12 03:43

Is there a way to pass variables using attributes to a directive without creating a new scope ?

HTML

&l
2条回答
  •  长发绾君心
    2021-02-12 04:01

    By default, directives do not create a new scope. If you want to make that explicit, add scope: false to your directive:

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

    fiddle

    Since a new property, button, is being created on the scope, you should normally create a new child scope using scope: true as @ardentum-c has in his answer. The new scope will prototypially inherit from the parent scope, which is why you don't need to put $parent.back() into your HTML.

    One other tidbit to mention: even though we are using replace: true, clicking the element still calls back(). That works because "the replacement process migrates all of the attributes / classes from the old element to the new one." -- directive doc
    So ng-click='back()' button='go back!' are migrated to the first div in the directive's template.

提交回复
热议问题