Question

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

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

我将这些数据放入$对话框中，因此我无法使用典型的routeProvider功能（afaik）。

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

相关问题：

angular - reusable dialogs

How to prepopulate a dialog in angularjs/bootstrap

Answer 1

这样的事可能有用。基本上$ 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);
      });
    });
});

Answer 2

我有类似的需求，但发现了内置的$templateCache＆amp; ui.router的$templateFactory行为不一致。当我使用它时......

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

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

所以我使用$q和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' })

angularjs测试ng-include是否存在文件

2 个答案: