angularjs在等待控制器时设置图像

Question

我有一个angularjs-Application。

在一个Controller中我正在等待一个图像源地址 - 我从PHP服务中得到这个。

controller.controller("LayoutCtrl", 
["$scope", "$http", "$route", 
function($scope, $http, $route) {
    $scope.$route = $route;
    $http.get('zkLib/services/header.php').success(function(data) { 
        $scope.header = data; });
}]);

header.php看起来像这样：

$result = array();

$result['index'] = db()->loadSetting('index_page');
$result['banner'] = db()->loadSetting('site_banner');

echo json_encode($result);

所以在我的模板中我写道：

        <div ng-controller="LayoutCtrl">
            <div desc="header">
                <a desc='hp_link' href="#{{header.index}}">
                    <img desc='banner' ng-src="zkLib/f/img/{{header.banner}}">
                </a>
            </div>
        </div>

我现在的问题是：

当网站打开时，它会在等待此服务时显示浏览器中的“NoImage”-Icon。 在此之后，图像将被正确查看。

但在我的COnsole中我也有这个错误：

Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:160/cms/app/zkLib/f/img/". 

在我的服务器上我有图像'loading.gif'，我想在我等待我的服务时显示这个。

如何解决这个问题？有人可以帮忙吗？

Answer 1

您在控制台中收到错误的原因是，在对header.php的请求完成并且角度渲染{{header.banner}}之前，它尝试加载“zkLib / f / img /”。您可以通过将整个相对URL放入{{header.banner}}范围属性来解决此问题。例如......

<img desc='banner' ng-src="{{header.banner}}">

并使header.banner成为完整的相对路径...

$http.get('zkLib/services/header.php').success(function(data) { 
    $scope.header = data;
    $scope.bannerImage = 'zkLib/f/img/' + $scope.header.banner;
});

现在，在请求完成之前，图像src将是一个空字符串，它不会显示损坏的图像图标或抛出错误。如果你想在控制器加载之前显示加载图像，你可以设置src，就像这样...

<img desc='banner' ng-src="{{bannerImage}}" src="/path/to/loading.gif">

在请求完成之前，src将是loading.gif文件。请求完成后，ng-src将启动，您的header.banner图像将显示

Answer 2

当实例化控制器时，$scope.header仍为空。

这使得ng-src="zkLib/f/img/{{header.banner}}"被评估为此相对路径：

'zkLib/f/img/' // translates to "http://localhost:160/cms/app/zkLib/f/img/"

---

您需要做的是在ng-src为空时保持$scope.header为空。

＃1）一种方法是写这个：

<img desc='banner' ng-if="header" ng-src="zkLib/f/img/{{header.banner}}">

＃2）或者这个（如果你不想使用ngIf）：

<img desc='banner' ng-src="{{ header && 'zkLib/f/img/' + header.banner }}">

＃3）但我更愿意在控制器内创建链接：

$http.get('zkLib/services/header.php').success(function(data) { 
  $scope.header = data;
  $scope.banner = 'zkLib/f/img/' + data.banner;
});

然后只需轻松使用它：

<img desc='banner' ng-src="{{ banner }}">