Question

我试图在用户登录后显示用户的头像：

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

    ...

  }
})();

这里是我的会议的组成部分（为简洁而简化）：

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

Answer 1

强制重新加载图片

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

应用时间戳并致电$scope.$appy()

Answer 2

使用后退

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

如何使用AngularJS显示动态加载的图像

2 个答案: