Question

我有以下指令：

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";
      }
    }
  }
});

不幸的是，该指令并没有拿起指令中的avatar_id。如您所见，我是控制台记录属性：

console.log("Type: "+ aType);
console.log("Character ID:"+ aId);

在我看来，我正在使用这个指令：

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

以下是Chrome控制台的输出。正如您所看到的，avatar_id显示为空白，但在检查attrs时，您可以看到属性存在，但只是没有显示在指令代码中。

Chrome控制台：

enter image description here

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

由于

Answer 1

可以有很多方法来解决这个问题。

使用一次性观看 - 您还可以考虑使用双向绑定隔离范围指令

   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>

使用属性观察

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

并将其与

一起使用

 <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>

活动巴士

只需使用角度事件总线并从控制器广播一个事件，该事件将数据设置为char_loaded，使用范围来监听指令中的事件。$ on并在初始化之后。

AngularJS：指令没有获取属性

1 个答案: