Question

是否可以改变这个

[{
  compType: "special-label",
  style: {
  left: 10,
  top: 10
 },
 {
  compType: "special-image",
  style: {
  left: 10,
  top: 10
 }
 ]

进入这个：

 <special-label element="element"><special-label>

我们尝试使用两个指令：

special-element作为包装指令

特殊标签/特殊图像作为特定指令

<div class="element" ng-repeat="element in elements">
<wix-element element="element" compType="{{element.compType}}" test="5">

</wix-element>
   </div>

但是当我们尝试在特殊元素的模板方法中访问compType时，它仍然需要被解析。

我们应该怎样做才能让它发挥作用？

Answer 1

您可以使用范围。$ observe for this：

app.directive('wixElement', function () {
    // these should maybe be defined in a factory
    var SPECIAL_LABEL = 0,
        SPECIAL_IMAGE = 1;
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            // observe changes in attribute - could also be scope.$watch
            attrs.$observe('compType', function (value) {
                switch (value) {
                    case SPECIAL_LABEL:
                        // do stuff for special-label
                        break;
                    case SPECIAL_IMAGE:
                        // do stuff for special-image
                        break;
                }
            });
        }
    });

另外，请看一下我的回答：https://stackoverflow.com/a/17087331/1008519 忽略将变量传递给控制器，只看看如何访问指令中的变量。

但有一件事......我不确定你为什么要用对象传递样式。你不应该只根据类来设置元素的样式吗？

Answer 2

这是具有限制功能的解决方案，以wix-element指令开头，每个列出的组件类型都有自己的指令。

我遗漏了传递属性的风格，仅仅作为概念证明。

app.directive('wixElement', function($compile) {
  return {
    restrict: 'E',
    scope: {
      component: '='
    },
    compile: function() {
      return function (scope, elem, attrs, ctrl) {
        var tagName = scope.component.compType;
        var template = '<' + tagName + ' component="component"></' + tagName + '>';

        elem.replaceWith($compile(template)(scope));
      }
    }
  }

});

app.directive('specialLabel', function() {
  return{
    restrict: 'E',
    template: '<div>{{component.text}}</div>'
  }
});

app.directive('specialImage', function() {
  return {
    restrict: 'E',
    template: '<div>{{component.text}}</div>'
  }
});

的 DEMO

Angular - 基于模型创建指令

2 个答案: