2014-10-17 3 views
-1

Я создал эту угловую директиву, которая работает до точки.Угловая директива изолированная область не обновляется

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

Любая помощь была бы принята с благодарностью. Спасибо

+0

Похоже, что он должен работать, что на самом деле показывает html, когда он запущен? –

+0

Я думаю, вам нужно называть 'scope. $ Apply' при изменении локальной области из функции ссылок. –

+0

Кроме того, я полностью озадачен вашим forEach. Вы пытаетесь создать несколько тегов ''? Потому что сейчас все, что он делает, это присвоение исходному значению последнего совпадающего изображения в альбоме «scope.source». –

ответ

0

OK Я решил это, удалив изолированную область и позволяя директиве наследовать от родительской области.

Начатый просто:

<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 или художественное произведение альбом, если он существует.

Спасибо за ваши комментарии и предложения.

Смежные вопросы