angularjs - Angular 动态多态指令

Question

我是 Angular 的初学者，但我正在研究一些稍微更高级的 Angular 落以确保它具有我需要的功能。

具体来说，我需要:

• 呈现一系列不同类型的小部件，每个小部件都实现为独立的 Angular 指令
• 小部件类型由数据决定，而不是由标记决定
• 每个小部件都在一个单独的文件中定义
• 将指令的范围设置为该小部件实例的数据

我想我已经解决了下面描述的要求并在 http://jsfiddle.net/cUTt4/5/ 实现了

问题:

1. 这是正确的、最佳实践并且相当快吗？
2. 我应该添加任何改进吗？
3. 如果小部件指令没有显式引用 { item : '=' } 来获得它们的独立作用域会更好，但是它们的子作用域应该由 renderform 指令构建。我怎么做？

我的解决方案: HTML (请注意，由于 jsfiddle 的限制，Angular 模板位于此处的脚本中)

<div ng-app="myApp">

    <script type="text/ng-template" id="widget-type-a">
        <div>
            <label>{{ item.label}} </label> 
            <input type="text" ng-model="item.val" >
        </div>
    </script>

    <script type="text/ng-template" id="widget-type-b">
        <div>
            <label>{{ item.label}}</label> 
            <input type="text" ng-model="item.val" >
        </div>
    </script>

    <div ng-controller="FormCtrl">
        <renderform></renderform>
    </div>
</div>

主要.js :

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

function FormCtrl($scope) {
    items = [
        {
            type: 'widget-type-a',
            label : 'Widget A instance 1',
            val: 1
        },
        {
            type: 'widget-type-b',
            label : 'Widget B instance 1',      
            val : 2
        },
        {
            type: 'widget-type-a',
            label : 'Widget A instance 2',
            val : 3
        }
    ];
    $scope.items = items

}

app.directive('renderform', function($compile) {
    function linkFn(scope, element) {
        var item, 
            itemIdx,
            templStr = '',
            newParent,
            data,
            newEl;

        newParent = angular.element('<div></div>')
        for(itemIdx in scope.items) {
            item = items[itemIdx];
            templStr += '<div ' + item.type + ' item="items[' + itemIdx + ']"></div>';
        }
        newEl = angular.element(templStr);
        $compile(newEl)(scope);
        element.replaceWith(newEl);
    }

    return {
        restrict: 'E',
        link:linkFn

    };

});

app.directive('widgetTypeA', function() {
    return {
        restrict: 'A',
        templateUrl: 'widget-type-a',
        scope: { item: '=' } 
    };

});

app.directive('widgetTypeB', function() {
    return {
        restrict: 'A',
        templateUrl: 'widget-type-b',
        scope: { item: '='}
    };

});

Answer 1

抱歉快速回答，未经测试:

<div data-ng-repeat="item in items">
  <div data-ng-switch data-on="item.type">
    <div data-ng-switch-when="widget-type-a" data-widget-type-a="item"></div>
    <div data-ng-switch-when="widget-type-b" data-widget-type-b="item"></div>
  </div>
</div>

如果这是您要查找的内容，请改进此答案。