Question

我的应用中有一个屏幕，应该显示一个组件列表。现在，组件可以是不同的，显示不同的HTML内容和不同的行为。

所以，我需要的是做一个 ngRepeat ，在每次迭代中传递一个对象，并根据这个对象中的一些参数生成不同的指令。

这是我想到的代码 - 在视图中：

<component ng-repeat="data in dataSet" config="data"></component>

指令本身：

myApp.directive('component', function($compile) {
        return {
            restrict: 'E',
            template: function(el, attrs) {
                switch(attrs.config.type) {
                    case 'numeric':
                        return '<numeric config="data">this is numeric</numeric>';
                    case 'bar':
                        return '<another config="data"></another>';
                }
            }
        };
    });

其中大部分内容确实有效，但我无法修复的问题是，通过模板生成的指令看不到 config 属性的值。换句话说，我想将对象从组件传递到指令里面，但那不起作用。

我尝试了另一种方法，但最终遇到了同样的问题：

myApp.directive('component', function($compile) {
            return {
                restrict: 'E',
                link: function(scope, el, attrs) {
                var newElement;
                switch(scope.config.type) {
                    case 'numeric':
                        newElement = $compile("<numeric config='data'>this is numeric</numeric>")(scope);
                        break;
                    case 'bar':
                        newElement = $compile("<another config='data'></another>")(scope);
                        break;
                }

                el.append( newElement );
            }
            };
        });

另一件事是，一些生成的指令将是我在线提取的指令，所以理想情况下我的解决方案不应该涉及修改这些指令。

我对其他方法持开放态度。

用于生成指令的Angular指令

0 个答案: