Question

在元素上应用角度语法{{}}时，指令attrs.$set将不起作用。

修改我的问题是，任何人都可以解释为什么？

如果解析{{}}，然后解析link，为什么link不会修改该元素？

首先link，{{}}应该删除，这两种情况都不会这样。

<div ng-app="ngApp" ng-controller="global">
  <a aaa href="http://{{::lan}}/4567">has syntax</a>
  <a aaa href="http://nosyntax/4567">no syntax</a>
</div>

angular.module('ngApp',[])
  .directive('aaa',function(){
  return {
    link:function(scope, ele, attr){
      attr.$set('href','http://fromdirective');
    }
  }
}).controller('global',function($scope){
  $scope.lan = 'en-gb';
})

Answer 1

由于您正在利用link，因此框架已将数据附加到相关元素，解析{{}}语法（摘要周期）。如果要在之前设置此值，则可以使用compile代替link ...

.directive('aaa',function(){ return { compile: function(tElement, tAttributes, transcludeFn) { // -- just a jqLite object at this point tAttributes.$set('href','http://fromdirective'); } }

updated pen

不确定这是否是你的意图，但这就是它发生的原因。正如其他人所建议的那样，$timeout也会避免摘要问题，但 link最初消化后的 - 您需要确定哪个更合适用例。

有关此主题的更多讨论，请参阅问题What is the difference between compile and link function in angularjs。另请查看ngHref directive - 也许这可能很有用。

Answer 2

这是你在找什么？

angular.module('ngApp',[])
  .directive('aaa',['$timeout',function($timeout){
  return {
    link:function(scope, ele, attr){
      $timeout(function() {
      attr.$set('href','http://fromdirective');
      },0);
    }
  }
}]).controller('global',function($scope){
  $scope.lan = 'en-gb';
})

Answer 3

使用$timeout将更改推送到摘要周期结束

angular.module('ngApp',[])
  .directive('aaa',function($timeout){
  return {
    link:function(scope, ele, attr){
      $timeout(function(){
         attr.$set('href','http://fromdirective');
      });         
    }
  }
});

为什么angular {{}}语法会阻止更改attrs。$ set in directive？

3 个答案: