Question

我的Angular 1.5.8应用中有一个属性指令my-directive。我想将它添加到元素中，并且我还要传递两个额外的参数，一个带有one-way绑定（@），另一个带有two-way绑定（{{ 1}}）。

在我尝试自定义指令的编译功能以添加额外属性之前，它工作正常。 =绑定仍然可以正常工作，但one-way绑定只会消失。

这里是plunk。

如果我注释掉编译功能，它会再次运行。我想我会以某种方式覆盖默认行为，但我无法弄清楚如何预防。

我的编译功能：

two-way

Answer 1

我没有准确回答为什么这样做的行为，但编译只适用于当前设置的子元素。因此，您只需将$compile(...更改为以下代码即可解决问题。

$compile(iElement.children())(scope);

更新1

显然，iElement的范围已由父范围定义。因此，编译将无法使用该元素，因为隔离范围仅在指令中起作用。

但是，现在的问题是如何在编译阶段添加新指令？您可以通过将指令更改为以下代码来完成此操作：

.directive('myDirective', function($compile) {
    return {
      terminal: true,
      priority: 1001,
      restrict: 'A',
      scope: {
        myObject: '=myObject',
        text: '@text'
      },
      transclude: true,
      bindToController: true,
      controller: function() {
        var $ctrl = this;
        $ctrl.onClick = onClick;
        return $ctrl;

        function onClick() {
          alert("clicked");
        }
      },
      controllerAs: '$ctrl',
      template: '<pre>{{$ctrl}}</pre> {{ $ctrl.text }} - {{ $ctrl.myObject.attr1 }}',
      compile: function compile(element, attrs) {
        element.removeAttr("my-directive");
        element.attr('compiled', true);
        element.attr('ng-click', "$ctrl.onClick()");
        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {},
          post: function postLink(scope, iElement, iAttrs, controller) {
            $compile(iElement)(scope);
          }
        };
      }
    };
  });

自定义编译功能删除双向绑定

1 个答案:

更新1