指令的链接不在范围内呈现变量

Question

我希望该指令能够打印带有 {{ }} 内的值的模板已解析，但事实并非如此。它打印出{{argVal}}，就好像它是一段 HTML 字符串。

myApp.directive('myArgs', [function() {

    var theTemplate = 
        '<span>{</span>' + 
            '<div ng-if="typeIsArray(argVal)">'+
                '<p>{{argVal}}</p>'
                '<my-args arg-val="argVal[0]"></my-args>'
            '</div>';

    return {
        restrict: "E",
        scope: {
            argVal: '='
        },
        controller: ... //contains utils to check type of argVal
        link: function(scope, element){
            alert(scope.argVal);
            element.html('').append(theTemplate);
        }
      };        
}]);

在我的 HTML 文件中，我只是像这样调用指令：

<my-args arg-val="someArray"></my-args> 

（someArray在控制器中定义为$scope.someArray = ["ola", "hi", "bonjour"];）

someArray 肯定在范围内，因为 alert(someArray) 正在工作。

那么为什么模板部分不能正确渲染呢？

Answer 1

你需要编译带有作用域的模板

element.html('').append(theTemplate);
$compile(element.contents())(scope);

别忘了提供依赖 $compile 到指令。

Answer 2

您不应该直接将模板附加到元素。像这样使用指令的模板属性：

    myApp.directive('myArgs', [function() {

    var theTemplate = 
        '<span>{</span>' + 
            '<div ng-if="typeIsArray(argVal)">'+
                '<p>{{argVal}}</p>'
                '<my-args arg-val="argVal[0]"></my-args>'
            '</div>';

    return {
        restrict: "E",
        scope: {
            argVal: '='
        },
        controller: ... //contains utils to check type of argVal
        template: theTemplate,  // this will eval correctly
        link: function(scope, element){
            alert(scope.argVal);

            // this is not needed
            //element.html('').append(theTemplate);
        }
      };        
}]);