javascript - Angular - 基于模型创建指令

Question

这个可以转吗

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

进入这个：

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

我们尝试使用两个指令：

1. 特殊元素作为包装指令

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

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

但是，当我们尝试在特殊元素的模板方法中访问 c​​ompType 时，它​​还没有被解析。

任何想法我们应该怎么做才能让它发挥作用？

Answer 1

您可以为此使用 scope.$observe：

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