Javascript 如何在指令定义期间向指令正确添加新指令

我在angularjs的动态指令方面遇到了一个大问题

我试图通过对象在指令定义期间向指令添加新指令：

compile: function () {
    return {
      pre: function (scope, iElement, iAttrs) {
        // in this case cbAttrs is an object {cbSuggest: true, cbDatepicker: true}, for example
        scope.objects = JSON.parse(iAttrs.cbAttrs);
        if (!iAttrs.compiled) {
          angular.forEach(scope.objects, function(props) {
            for (var prop in props) {
              iAttrs.$set(prop, (typeof props[prop] === 'object' ? JSON.stringify(props[prop]) : props[prop]));
            }
          });
          iAttrs.$set('dataCompiled', true);
          $compile(iElement)(scope);
        }
      }
    };
  }

我已经设法做到了这一点。但老实说，我真的觉得这样做不对，我不明白为什么我必须在指令的预编译阶段编译元素

如果我这样添加它，输入的行为会很奇怪，例如：尝试在输入中向左移动，然后删除一个字母，会使光标向右移动到输入的末尾

我在link函数中尝试过，它将为输入生成相同的行为：

link: function(scope, elem, attrs) {
  scope.objects = JSON.parse(attrs.cbAttrs);

    if (!attrs.compiled) {
      angular.forEach(scope.objects, function(props) {
        for (var prop in props) {
          attrs.$set(prop, (typeof props[prop] === 'object' ? JSON.stringify(props[prop]) : props[prop]));
        }
      });
      attrs.$set('dataCompiled', true);
      $compile(elem)(scope);
    }
  }

老实说，我不知道还能做什么。我已经看到了模板示例中的注释，但我不想将return元素设置为硬编码

普朗克同时面临两个问题：

---

jsFIDLE:

我就是这样设法解决所有问题的：

return {
  restrict: 'A',
  terminal: true,
  priority: 1000,
  compile: function () {
    return {
      post: function (scope, iElement, iAttrs) {
        var attrs = $interpolate(iAttrs.cbAttrs);
        attrs = JSON.parse(scope.$eval(attrs));

        angular.forEach(attrs, function(attr){
          for(var prop in attr) {
            iElement.attr(prop, (typeof attr[prop] === 'object' ? JSON.stringify(attr[prop]) : attr[prop]));
          }

        });

        iElement.removeAttr('data-cb-attrs');
        $compile(iElement)(scope);
      }
    };
  }
};

---

基本上，我使用terminal来阻止所有的编译继续运行，添加我需要的属性，然后删除directive属性并编译它。

在或jsfiddle.net中进行一个简单的演示，复制问题会有所帮助。同样为了澄清，主题是“添加新指令”，但我认为应该是“添加属性”？我将创建一个简单的演示，感谢大家的指导。但是，即使我们谈论的是属性，它仍然是一个方向，要准确地理解您试图做的事情有点困难。能说得更清楚些吗？您是说您有一个检查父作用域属性的指令，并且truthy是否向同一元素添加了第二个指令？在您的示例中，指令位于输入上是否有原因？指令不能嵌套是有原因的吗？好吧，让我试着为您分析一下：指令是一个输入，但我通过json接收输入配置。输入本身存在于模板上，并通过该模板上的中继器生成。我试图做的基本工作是通过配置json动态地配置要添加到该输入中的属性/指令。重点是，我对编译的attr进行了“修复”，因为否则将生成一个编译循环。我只是想在编译我的指令之前添加新的属性，这样我就可以动态绑定新的指令。有趣的是，firefox中不存在光标问题。这是一个可能对你有帮助的演示。使用

template:function（）

替换输入并添加来自JSON的属性。光标问题消失了