javascript - 如何在指令定义期间正确地将新指令添加到指令

Question

我在使用 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: 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);
    }
  }

老实说，我不知道还能做什么。我看过模板示例的评论，但我不想将返回元素设置为硬编码。

Plunker 有两个问题:http://plnkr.co/edit/tbQubTMarjxB8ogzhtey?p=previewjsFiddle:http://jsfiddle.net/plantface/Lwktcyu7/

Answer 1

这就是我设法解决所有问题的方法:

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属性再编译。