如何显示与AngularJS

我想中显示的用户的化身，一旦用户登录动态加载的图像：如何显示与AngularJS

<img src="{{(API_PROVIDER.domain + user.avatar.small_thumb.url)}}" alt="" class="img-circle size-30x30">

但是，如果我登录后重新加载页面上面的代码才有效。我怎样才能让它工作，而不必以编程方式重新加载页面？

PS：以上解析为这样的事情：www.example.com/api/something.jpg

编辑：

我一直在使用ng-src代替src试过才没有工作。至于其他评论，我的变量是否在范围内，是的，头像链接仅在用户登录时定义。然后我使用$state.go('somewhere')来更改模板，在这种情况下，我应该更新该变量的图像。

这里是我的主控制器：

(function() { 
    'use strict'; 

    angular 
    .module('admin') 
    .controller('MainController', MainController); 

    /** @ngInject */ 
    function MainController($timeout, webDevTec, toastr, $scope, $http, authenticatedUser, Session, $anchorScroll, API_PROVIDER) { 

    ... 

    $scope.session = Session; 
    $scope.user = Session.user; 
    $scope.API_PROVIDER = API_PROVIDER; 

    ... 

    } 
})();

这里AR我的会话的部件（减少简洁）：

... 
this.create = function(user) { 
    this.user = user; 
    this.role = user._role; 
    this.token = user.auth_token; 
    this.userRole = user._role; 
}; 
return this; 
...

和会话如何保存供以后检索：

... 
$window.sessionStorage["userInfo"] = JSON.stringify(loginData); 
...

在这种情况下，我需要使用$apply()吗？如果是，那又如何？

编辑3：这是我如何设置我的Session对象

authService.login = function(user, success, error, $state) { 
    $http.post(API_PROVIDER.full_path + 'signin', user).success(function(data) { 

    if(data.success){ 
    var user = data.user; 
    var loginData = user; 
    $window.sessionStorage["userInfo"] = JSON.stringify(loginData); 
    delete loginData.password; 
    Session.create(loginData); 
    $rootScope.$broadcast(AUTH_EVENTS.loginSuccess); 
    success(loginData); 
    } else { 
    $rootScope.$broadcast(AUTH_EVENTS.loginFailed); 
    error(); 
    } 
    }); 
};

来源

2015-11-02 WagnerMatosUK

尝试'NG-src'在征求意见，而不是'src' –

抛开上面，您的数据看起来并不像它的范围。如果不是，那么在更新数据之后，您将不得不运行'$ apply（）'函数，以便模板知道您的数据已更改。 –

您展示了如何设置会话存储 - 您还可以显示如何恢复此信息？可能是因为你需要在那里申请。 – Zlatko

部队重装图像

https://stackoverflow.com/a/21731946/2906183

应用时间戳和调用$scope.$appy()

来源

2015-11-03 10:45:30

使用回落

HTML：

<img fallback-src="http://google.com/favicon.ico" ng-src="{{image}}"/> 

JS: 

myApp.directive('fallbackSrc', function() { 
    var fallbackSrc = { 
    link: function postLink(scope, iElement, iAttrs) { 
     iElement.bind('error', function() { 
     angular.element(this).attr("src", iAttrs.fallbackSrc); 
     }); 
    } 
    } 
    return fallbackSrc; 
});

来源

2015-11-03 10:59:39 Shohel

如何显示与AngularJS

回答

相关问题