Question

据我所知，插值值字符串如果在模板中指定，则会正确扩展/解析，但如果稍后添加则不会。为了演示，我有以下代码：

describe.only('directive tests - ', function() {

  it('add dynamic interpolated attribute value', function() {

    module(function($compileProvider) {
      $compileProvider.directive('hello', function() {
        return {
          restrict: 'A',
          replace: true,
          template: '<a foo="{{1+1}}"></a>',
          compile: function link(tElement, tAttrs) {
            tElement.attr('bar', '{{2+2}}'); // add an interpolated attr.
          }
        };
      });
    });

    inject(function($compile, $rootScope) {
      var element = angular.element('<div hello/>');
      $compile(element)($rootScope);
      $rootScope.$apply();
      console.log(' * ', element.prop('outerHTML'));
    });

  });

});

和console.log打印：

<a foo="2" hello="" bar="{{2+2}}" class="ng-scope"></a>'

和NOT：

<a foo="2" hello="" bar="4" class="ng-scope"></a>'

我想的就是这样。是什么给了什么？

Answer 1

tElement.attr('bar', $interpolate('{{2+2}}')());

是的，在compile中执行此操作为时已晚，更具体地说是对必须编译的指令元素本身进行更改（需要重新编译才能使更改生效）。 / p>

但是以下

      // replace: true,
      template: '<a foo="{{1+1}}">aa</a>',
      compile: function link(tElement, tAttrs) {
        tElement.find('a').attr('bar', '{{2+2}}');
      }

会按预期工作。

属性观察和插值也可以在link（或controller）中完成：

      link: function (scope, element, attrs) {
        attrs.$observe('bar', function (interpolatedBar) {
          scope.bar = interpolatedBar;
        });
      }

它将在bar属性上设置一个观察者（而$interpolate(...)()是一次性分配，并且不会从范围内插任何值）。

angularjs指令 - 如何添加插值属性

1 个答案: