Question

我创建了这个角度指令，它可以达到某种程度。

app.directive('albumArt', function(){
return {
    restrict: 'AE',
    scope: {
        'pictures': '=pictures',
        'source' : '@source'
    },
    replace: true,
    template: '<img ng-src="{{source}}" width="30" height="30">',

    link: function( scope, element, attrs ){
         angular.forEach( scope.pictures, function( value, key ){
         //console.log( value.album, attrs.album );
         if( value.album == attrs.album ){
          scope.source="data:" + value.mime_type + ";base64," + value.picture;
          //console.log( value.mime_type );
         }
        }); 
      }
    };
});

通过以下方式调用：

<album-art pictures='pictures' album='{{album.title}}' source='{{default}}' class="pull-left art"></album-art>

图片是一个数组，相册标题很明显，并且主应用控制器中的源设置为默认图像。

我遇到的问题是在指令链接中的forEach循环中找到匹配项：function，scope.source已设置但未更新模板{{source}}引用。

非常感谢任何帮助。感谢

Answer 1

好的我通过删除隔离的范围并允许指令从父范围继承来解决这个问题。

简单地发起：

<album-art album='{{album}}'></album-art>

或

<album-art album='{{album.title}}'></album-art>

取决于应用视图。该指令现在看起来像这样：

app.directive('albumArt', function(){
return {
    restrict: 'AE',
    replace: true,
    template: '<img ng-src="{{source}}" width="30" height="30">',

    link: function( scope, element, attrs ){
        for( i = 0; i <= scope.pictures.length; i++ ){
            if( scope.pictures[i].album == attrs.album ){
                scope.source="data:" + scope.pictures[i].mime_type + ";base64," + scope.pictures[i].picture;
                break;
            }
        };
     }
  };
});

我得到一个img default.png或相册艺术品（如果存在）。

感谢您的所有意见和建议。

Angular Directive隔离范围未更新

1 个答案: