3

我刚刚添加了一个 CDN 服务，以使我的网站加载更快。<img>我对使用标签获取的照片有疑问。

我有很多这样的案例：

// userProfile.thumbnailPhotoSrc = some/relative/path.png    
ng-src="{{userProfile.thumbnailPhotoSrc}}"

（我使用 AngularJS）。

在启动时，我有一个将 CDN 端点保存到window.cdn变量的脚本。如果脚本决定没有可用的端点：

window.cdn = '';

所以我希望能够做类似的事情：

ng-src="window.cdn + {{userProfile.thumbnailPhotoSrc}"

但这是不可能的，因为window.cdn没有评估。但这都不起作用：

ng-src="{{window.cdn + userProfile.thumbnailPhotoSrc}"

因为我只能$scope访问{{}}. 我无法将 CDN 端点保存到，因为每个控制器都$scope存在一个（我有很多，这是不可维护的）。$scope

我想到的最后一件事，希望ng-src允许 - 添加一个在任何ng-src属性上运行的转换函数，但我找不到如何做到这一点。

你建议我怎么做？请记住，如果 CDN 出现故障，我希望网站从 CDN 获取照片并回退到源服务器（获取相对路径）。我怎样才能获得这种行为？

谢谢

4

2 回答 2

4

您可以在 Angular 中创建自定义过滤器

然后你会在你的模板中：

ng-src="{{userProfile.thumbnailPhotoSrc | cdn}"

您可以将该$window服务作为依赖项添加到过滤器服务，这样您就不必从全局对象中提取它，并且您也可以测试过滤器。

于 2016-04-13T16:26:02.337 回答
1

如果您尝试更新所有<img>标签的 src. 您可以创建一个指令：

angular.module('imageCdnSrc', [])
.directive('img',['$interpolate', function($interpolate) {
    return {
    restrict: 'E',
    scope: false,
    compile: function(element, attrs) {
      var ngSrc = attrs.ngSrc;
      delete attrs.ngSrc; // prevent ngSrc directive to trigger

      return function($scope,element,attrs) {
        var ngSrcVal = $interpolate(ngSrc)($scope); //returns the string value of ngSrc

        /* Add Logic Below to decide what to do */
        if(window.cdn && ngSrcVal && ngSrcVal.length>0){
          attrs.ngSrc = window.cdn + ngSrcVal;
          /* if image fails to load with cdn, load the default */
          element.one('error', function() {
            angular.element(this).attr("src", ngSrcVal);
          });
        }
        else{
          attrs.ngSrc = ngSrcVal;
        }
      };      
    }
  };
}]);
于 2016-04-13T17:03:31.797 回答