Javascript AngularJS:指令未拾取属性

我得到了以下指令：

app.directive('ngAvatar', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<img class="avatar-medium" ng-src="{{url}}" />',
    link: function(scope, elem, attrs) {
      console.log(attrs);
      var aType = attrs.avatarType;
      var aId = attrs.avatarId;
      console.log("Type: "+ aType);
      console.log("Character ID:"+ aId);
      var baseUrl = "http://api-character.com/";
      switch(aType){
        case "character":
          scope.url = baseUrl + "Character/"+aId+"_256.jpg";
      }
    }
  }
});

在我看来，我是这样使用这个指令的：

<ng-avatar avatar_type="character" avatar_id="{{character.character_id}}"></ng-avatar>

以下是我的Chrome控制台的输出。正如您所看到的，头像id显示为空白，但在检查

attrs

时，您可以看到属性在那里，但只是没有显示在指令代码中

Chrome控制台：

有人知道为什么它不起作用吗

---

谢谢，有很多方法可以解决这个问题

<强>使用一次监视<强> -也可以考虑使用双向绑定隔离范围指令

   link: function(scope, elem, attrs) { 
      //Set up watch
      var unWatch = scope.$watch(attrs.avatarId, function(v){
        if(v){
          unWatch();
          init();
        }
      });
     function init(){
       //initialize here
     }
   }

并将其绑定为：

   <ng-avatar avatar-type="character" avatar-id="character.character_id"></ng-avatar>

和它一起使用

 <ng-avatar avatar-type="character" avatar-id="{{character.character_id}}"></ng-avatar>

并将其绑定为

 <ng-avatar avatar-type="character" avatar-id="characterPromiseOrCharObject"></ng-avatar>

事件总线

---

只需使用angular event bus并从控制器广播一个事件，该控制器设置数据，如

char\u loaded

，使用scope在指令中侦听事件。$on，一旦获得初始化。

从控制台输出可以看出，avatar\u类型工作正常。但未拾取虚拟角色id。您的控制台显示这两个值。问题是什么？头像id中填充了您需要使用的号码-not。您可以在控制台中看到它，可能是因为它被规范化为avatar_类型而不是avatarType.Ok。我将对其进行更改，但正如您在这行console.log（“Type:+aType”）中看到的那样；它输出正确的数据。但是行console.log（“字符ID:+aId”）；没有输出数据。问题在于console.log（“字符ID:+aId”）；不是console.log（“类型：+aType”）；只需设置一个一次性手表。真棒的答案，为我的问题提供了解决方案，并提供了更多关于$watch的见解！谢谢

 <ng-avatar avatar-type="character" avatar-id="{{character.character_id}}"></ng-avatar>

  app.directive('ngAvatar', function($q) {
   //...
   link: function(scope, elem, attrs) { 
      //Set up watch
     $q.when(scope.$eval(attrs.character)).then(init); 

     function init(character){
       var id = character.id;
       //initialize here
     }
    }
  } 

 <ng-avatar avatar-type="character" avatar-id="characterPromiseOrCharObject"></ng-avatar>