4

ディレクティブ内のサービスから返された値へのデータバインディングを達成しようとしています。

私はそれを機能させていますが、私はフープを飛び越えています.もっと良い方法があると思います.

例えば：

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

        }
    };

同じ結果を達成するためのより簡潔で「角度のある」方法はありますか?

4

1 に答える 1

4

これはどう ？プランカー

あなたの指令の主なアイデアは次のようなものです

.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;
            }
        };
    });
于 2012-12-24T07:12:55.853 に答える