如何顯示與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

回答

相關問題