AngularJS: Binding inside directives

Question

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?

As silly as this might be.... could it be that $scope.$watch('user.username') should be scope.$watch('user.username')? — Mathew Berg
– Mathew Berg, Commented Dec 24, 2012 at 13:21
@MathewBerg thanks for catching that - unfortunately it's just a typo in the post. — Marty Pitt
– Marty Pitt, Commented Dec 25, 2012 at 5:31

maxisam · Accepted Answer · 2012-12-24 07:12:55Z

4

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

answered Dec 24, 2012 at 7:12

maxisam

22.9k9 gold badges83 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS: Binding inside directives

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related