Angularjs指令：如何通過動態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); 
    } 
} 

}); 

控制器：

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。