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

要用它绑定第二个指令（我真的不推荐用法），你可以使用link：

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

动态属性AngularJS

1 个答案: