Question

我试图在指令中创建一个包含动态内容的templateUrl，例如：

//index.html
...
<directive variable="Hi" />
...

//template.html
<div>{{ variable }}</div>

使用指令：

app.directive("directive",[
    function(){
        return {
            restrict: "E",
            replace: true,
            templateUrl: "template.html"
       }
    }
]);

在此示例中，我想要做的是将{{ variable }}替换为"Hi"，但我不知道该怎么做。实现这一目标的最佳方法是什么？

Answer 1

试试这个：

return {        
    restrict: "E",
    scope:{
        variable: '@',    //Note the '@'
    }
    replace: true,
    templateUrl: "template.html"
}

使用＆＃39; @＆＃39;字符，表示您要传递值。
使用＆＃39; =＆＃39;表示您通过引用传递 变量的字符。

使用＆＃39;＆amp;＆＃39;表示您已通过功能的字符。

Answer 2

return {        
    restrict: "E",
    scope:{
        variable: '=',
    }
    replace: true,
    templateUrl: "template.html"
}

Answer 3

或者如果你不想要一个孤立的范围，你可以这样做：

return {        
    restrict: "E",
    link: function(scope, elem ,attr) {
        scope.variable = attr.variable;
    },
    replace: true,
    templateUrl: "template.html"
}

Angularjs指令上的templateUrl属性

3 个答案: