5

我正在使用 ng-include 在 AngularJS 应用程序中引入部分内容。如果部分 .html 文件不存在，我想做点别的。

部分名称是从 $location.path() 中提取的。所以如果路径是“/foo”，那么我想使用“my_partial_foo.html”。但是，如果“my_partial_foo.html”不存在，那么我想改用“my_partial_default.html”。

我将这些数据放入 $dialog，所以我不能使用典型的 routeProvider 功能（afaik）。

我的主要问题是：如何在 ng-include 指令中使用“my_partial_foo.html”之前确定它是否存在？

相关问题：

角度 - 可重用的对话框

如何在 angularjs/bootstrap 中预填充对话框

4

2 回答 2

3

这样的事情可能会奏效。基本上 $templateCache 将始终具有 my_partial_foo.html 的键（因此您的 ng-include 始终可以引用它）但该值可能是默认值或真实值。

var app = angular.module('myapp', []).run(function($templateCache,$http){
  $http.get('my_partial_foo.html',
    //success
    function(data){
      $templateCache.put('my_partial_foo.html', data);
    },
    //failure
    function(){
      $http.get('my_partial_default.html', function(data){
        $templateCache.put('my_partial_foo.html', data);
      });
    });
});
于 2013-07-29T18:28:00.497 回答
1

我有类似的需求，但发现内置$templateCache和 ui.router 的$templateFactory行为不一致。当我用这个...

$templateFactory.fromUrl( './non-existant.html' )
.catch( function( err ){ console.log( 'does not exist' )})

...它将无法触发 catch 回调。只有在两次点击此调用后才会触发错误。

$q所以我使用and推出了自己的解决方案XMLHttpRequest：

.service( 'templateUtils', [
    '$q'
    function( $q ){
        var api = {
             hasTemplate: function( url ){
                  var d = $q.defer()
                  var rqst = new XMLHttpRequest()
                  rqst.open( 'GET', url )
                  rqst.onload = function( evt ){
                       if( evt.target.status === 200 )
                           d.resolve( true )
                       else
                           d.reject( false )
                  } 

                  return d.promise
             }
        }

        return api
    }
])

我是这样用的...

var templateUrl = './default-template.html'

templateUtils.hasTemplate( urlToCheck )
.then( function( rsp ){ templateUrl = './different-template.html' })
于 2016-08-24T03:40:33.943 回答