AngularJS: Binding inside directives

angularjs

Solution

How about this ? plunker

The main idea of your directive is like

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

Problem

I'm trying to acheive databinding to a value returned from a service inside a directive. I have it working, but I'm jumping through hoops, and I suspect there's a better way. For example: ``` <img my-avatar> ``` Which is a directive synonymous to: ``` <img src="{{user.avatarUrl}}" class="avatar"> ``` Where `user` is: ``` $scope.user = CurrentUserService.getCurrentUser(); ``` Here's the directive I'm using to get this to work: ``` .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'); } }; ``` Is there a more succinct, 'angular' way to achieve the same outcome?

Original source