动态属性AngularJS

Question

我的应用程序的目标是创建属性编辑器。从服务器我得到的属性列表，它的类型：

$scope.properties = [ 
    {name: 'property1', type: 'integer', 'value': 123}, 
    {name: 'property2', type: 'bool', 'value': 123}, 
    {name: 'property3', type: 'string', 'value': 123}, 
    {name: 'property4', type: 'custom', 'value': 123}, 
]; 

使用这些数据我想创建HTML列表这样。 这部分不起作用。如何改变它？

<ul> 
    <li ng-repeat="property in properties"> 
     <div property-editor-{{property.name}} my-data="property"></div> 
    </li> 
</ul> 

那么我可以很容易地实现与指令是这样的

angular.module('PropertyEditor').directive('propertyEditorCustom', function() { 
    return {restrict: 'A',controller:function(){...}}; 
}) 

PS定制控制器：我想避免一个集中的开关，因为新的模块可以增加它的自定义类型。

Answer 1

它不会像这样工作。或者你需要第一个指令来绑定第二个动态指令。

我更好的建议使用值：

<ul> 
    <li ng-repeat="property in properties"> 
     <div property-editor="property.name" my-data="property"></div> 
    </li> 
</ul> 

，并得到它是这样的：

angular.module('PropertyEditor').directive('propertyEditor', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      propertyEditor: '=' 
     }, 
     controller: ['$scope', function($scope) { 
      console.log($scope.propertyEditor); // Here you can do specific stuff for propertyEditor 
     }] 
    }; 
}) 

要绑定与它第二个指令（我真的不推荐使用），您可以使用链接：

angular.module('PropertyEditor').directive('propertyEditor', ['$compile', function($compile) { 
    return { 
     restrict: 'A', 
     scope: { 
      propertyEditor: '=' 
     }, 
     link: function($scope, $element) { 
      var $newElement = $element.clone(true); 
      $newElement.removeAttr('property-editor').attr('property-editor-' + $scope.propertyEditor, 'property-editor-' + $scope.propertyEditor); 
      $handler = $('<div>').append($newElement); 
      $element.replaceWith($compile($handler.html())($scope)); 
     } 
    }; 
}])