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 忽略变量到 Controller 的传递，只看如何访问指令中的变量。

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