指令的 link 未在范围内呈现变量

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

指令的 link 未在范围内呈现变量

Directive's link is not rendering variable in the scope

angularjs

angularjs-scope

angular-directive