Question

我有几个指令，我想为ng-repeat的结果选择每个指令。

<div class="{{field.type_desc}}"  ng-repeat="field in row.fields"></div>

这是控制器中的代码

app.directive('Textbox', function($compile) {
return {
    restrict: 'C',
    link : function (scope,element)
    {
        formFieldTemplate= $('<input>').attr('type','password'); 
        $compile(formFieldTemplate)(scope); 
        var formListElement = $(element);
        formListElement.append(formFieldTemplate);
    }
}
})

页面加载后我可以在HTML中看到正确的类，但我仍然看不到该指令。

感谢您的帮助

Answer 1

您缺少动态生成指令的一些内容：

var myNewDirectiveScope = $scope.$new();
myNewDirectiveScope.myProperty = 'Some value';

var myDirective = $compile('<div my-directive-name my-property="myProperty"></div>');

var myDirectiveElement = myDirective(myNewDirectiveScope);

$(window.document.body).append(myDirectiveElement);

首先我要创建一个新的范围。然后我将字符串'Some value'分配给该范围的属性。

然后我为编译提供了一个字符串模板，其中包含指令的名称和指向myProperty的属性，该属性位于您创建的范围内。这将返回一个函数，该函数一旦使用作用域调用，将返回您可以实际附加到页面上的元素。

所以在你的情况下可能是：

app.directive('Textbox', function($compile) {
return {
    restrict: 'C',
    link : function (scope,element)
    {
        var formFieldTemplate = '<input type="password" />';

        var directive = $compile(formFieldTemplate);

        var formListElement = directive(scope);

        formListElement.append(formFieldTemplate);
    }
}
})

在AngularJS中动态选择指令

1 个答案: