AngularJS：綁定內部指令

Question

我試圖將數據綁定從指令中的服務返回的值。

我有它的工作，但我跳過箍，我懷疑有更好的方法。

例如：

<img my-avatar> 

這是一個指令同義：

<img src="{{user.avatarUrl}}" class="avatar"> 

其中user是：

$scope.user = CurrentUserService.getCurrentUser(); 

下面是我用得到這個指令工作：

.directive('myAvatar', function(CurrentUser) { 
    return { 
     link: function(scope, elm, attrs) { 
      scope.user = CurrentUser.getCurrentUser(); 
// Use a function to watch if the username changes, 
// since it appears that $scope.$watch('user.username') isn't working 
      var watchUserName = function(scope) { 
       return scope.user.username; 
      }; 
      scope.$watch(watchUserName, function (newUserName,oldUserName, scope) { 
       elm.attr('src',CurrentUser.getCurrentUser().avatarUrl); 
      }, true); 
      elm.attr('class','avatar'); 

     } 
    }; 

是否有一種更簡潔，「有角度」的方式來實現相同的結果？

Answer 1

這個怎麼樣？ plunker

你的指令的主要思想是像

.directive('myAvatar', function (CurrentUserService) { 
     "use strict"; 
     return { 
      restrict: 'A', 
      replace: true, 
      template: '<img class="avatar" ng-src="{{url}}" alt="{{url}}" title="{{url}}"> ', 
      controller: function ($scope, CurrentUserService) { 
       $scope.url = CurrentUserService.getCurrentUser().avatarUrl; 
      } 
     }; 
    });