javascript - 在 AngularJS 部分中动态包含指令

Question

我有一个指令列表(通常是表单字段和自定义表单控件)。现在我将从后端获取指令名称列表以用于构建表单。

它基本上创建了一个动态表单，我不知道表单中的所有表单字段是什么(这取决于我从后端获得的 JSON 配置文件)。

示例 JSON:

field1 : {
     type: 'text',
     directive : 'directive1'
},
field2: {
     type : 'dropdown',
     directive : 'dropdown-directive'
}

我可以在 AngularJS 中做类似的事情吗？如果可能的话，怎么做？

Answer 1

对作用域使用 $compile 服务。这将允许您编译可以附加到容器的 Angular 代码。

参见 jsfiddle:http://jsfiddle.net/p8jjZ/1/

HTML:

<div ng-app="myApp" ng-controller="MainController">
    <div custom-elements="myData.elements"></div>
    <p>{{user}}</p>
</div>

JavaScript:

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

mod.controller("MainController", function ($scope) {
    $scope.myData = {};
    $scope.myData.elements = {
        field1 :{ type: 'text', directive : 'directive1' },
        field2: { type : 'dropdown', directive : 'dropdown-directive' }
    }; 
});

mod.directive("customElements", function ($compile) {
    return {
        restrict: "A",
        scope: {
            customElements: "="
        },
        link: function (scope, element, attrs) {
            var prop,
                elems = scope.customElements,
                currElem,
                compiled;
            for (prop in elems) {
                currElem = elems[prop];
                console.log("Working on " + prop);
                //compile input against parent scope. Assuming directives are attributes, but adapt to your scenario:
                compiled = $compile('<div ' + currElem.directive + '></div>')(scope.$parent);

                //append this to customElements
                element.append(compiled);
            }
        }
    }
});

mod.directive("directive1", function () {
    return {
        restrict: "A",
        template: '<div>Whoa! I am directive 1<br><input type="text" ng-model="user.name"></div>'
    }
});

mod.directive("dropdownDirective", function () {
    return {
        restrict: "A",
        template: '<div>I am another directive<br><select ng-model="user.color"><option value="blue">blue</option><option value="green">Green</option></div>'
    }
});

customElement 指令只是创建指令，就好像它是元素的属性一样。这是一个非常简单的示例，但应该让您开始了解您想要做什么，您可以在其中相应地更新构建元素/指令的逻辑。