Angularjs指令: how to find an element by dynamic id,并修改模板

Question

我正在尝试基于模板动态生成表单，该模板又具有一些动态属性。

我已经很接近了，但在检索容器元素时遇到问题。

这是指令:

myApp.directive('myDirective', function () {
    return {
    template: "<div> <label>{{Field.Name}} <div id='{{Field.Name}}_Container'></div> </label></div>",
    replace: true,
    restrict: 'AE',
    scope: {
        Field: "=fieldInfo",
        FieldData:"="
    },
    link: function (scope, element, attr) {
        var input = "<input type='" + scope.Field.Type + "' data-ng-model='FieldData[" + scope.Field.Name + "]' />";
        var inputEl = angular.element(input);
        var container = angular.element("#" + scope.Field.Name + "_Container"); // Doesn't work
        container.append(inputEl);
    }
}

});

Controller :

function MyCtrl($scope) {
    $scope.Fields = [
      { Name: "field1", Type: "text", Data:null },
      { Name: "field2", Type: "number", Data:null }
    ];

     $scope.FieldData = {}; //{fieldname: fielddata}
}

HTML:

<div ng-controller="MyCtrl">
      <my-directive data-ng-repeat="field in Fields" data-field-info="field">
    </my-directive>
</div>

基本上我有字段描述符对象，并且需要基于该对象生成一个表单。我不太确定如何引用容器对象 - 在以某种方式链接之前是否必须编译模板？

另外，我实际上正在使用 templateUrl，如果这很重要的话。

这是一个 fiddle .

Answer 1

您需要使用$compile编译为 html 模板。此外，您还可以在 link 函数中使用 element 来访问模板中的外部 div。

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function ($compile) {
    return {
        template: "<div> <label>{{Field.Name}} <div id='{{Field.Name}}_Container'></div> </label></div>",
        replace: true,
        restrict: 'AE',
        scope: {
            Field: "=fieldInfo",
            FieldData:"="
        },
        link: function (scope, element, attr) {
            var input = "<input type='" + scope.Field.Type + "' data-ng-model='FieldData[" + scope.Field.Name + "]' />";
            var html = $compile(input)(scope);
            element.find('div').append(html);
        }
    }
});

参见jsfiddle .