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);
        }
      };        
}]);

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

2 个答案: