javascript - 为什么 angular {{}} 语法会阻止指令中 attrs.$set 的更改？

Question

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

编辑:我的问题是谁能解释为什么？

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

如果 link 首先，{{}} 应该被移除，这两种情况都不会产生这样的结果。

这是 code pen

<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 也将避免摘要问题，但是 after link 已初步消化 - 您需要确定哪个根据您的用例更合适。

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