ui-bootstrap模态加载模板错误

Question

我是使用ui-bootstrap并使用ui-bootstrap-tpls-0.13.0.min.js并出现错误的新手。使用$模式我有一个加载错误加载模板文件：./template/modal/window.html

我没有预料到这个错误。

我以为图书馆内置了模板。我太累了，不正确地阅读文档？

Error: [$compile:tpload] http://errors.angularjs.org/1.3.14/$compile/tpload?p0=template%2Fmodal%2Fwindow.html 
M/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417 
d/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:136:257 
f/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:112:20 
Pe/this.$get</l.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:125:301 
Pe/this.$get</l.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:122:390 
Pe/this.$get</l.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:126:56 
l@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:81:169 
S@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:85:301 
vf/</e@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:86:366 

http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js 
Line 102 

的代码是从Dan Wahlin's example解除：

选项：

tempModalDefaults{"backdrop":"static","keyboard":true,"modalFade":true,"templateUrl":"/MobileCOP/tmpl/dfltmodal.html"} 
tempModalOptions{"closeButtonText":"Close","actionButtonText":"OK","headerText":"Proceed?","bodyText":"Perform this action?"} 

代码：

app.service('modalDialogSvc', ['$modal', 
    function ($modal) { 

     var modalDefaults = { 
      backdrop: true, 
      keyboard: true, 
      modalFade: true, 
      templateUrl: '/MobileCOP/tmpl/dfltmodal.html' 
     }; 

     var modalOptions = { 
      closeButtonText: 'Close', 
      actionButtonText: 'OK', 
      headerText: 'Proceed?', 
      bodyText: 'Perform this action?' 
     }; 

     this.showModal = function (customModalDefaults, customModalOptions) { 
      if (!customModalDefaults) customModalDefaults = {}; 
      customModalDefaults.backdrop = 'static'; 
      return this.show(customModalDefaults, customModalOptions); 
     }; 

     this.show = function (customModalDefaults, customModalOptions) { 
      /* Create temp objects to work with since we're in a singleton service */ 

      var tempModalDefaults = {}; 
      var tempModalOptions = {}; 

      /* Map angular-ui modal custom defaults to modal defaults defined in service */ 
      angular.extend(tempModalDefaults, modalDefaults, customModalDefaults); 

      /* Map modal's .html file $scope custom properties to defaults defined in service */ 
      angular.extend(tempModalOptions, modalOptions, customModalOptions); 

      console.log('tempModalDefaults'+JSON.stringify(tempModalDefaults)); 
      console.log('tempModalOptions'+JSON.stringify(tempModalOptions)); 
      if (!tempModalDefaults.controller) { 
       tempModalDefaults.controller = function ($scope, $modalInstance) { 
        $scope.modalOptions = tempModalOptions; 
        $scope.modalOptions.ok = function (result) { 
         $modalInstance.close(result); 
        }; 
        $scope.modalOptions.close = function (result) { 
         $modalInstance.dismiss('cancel'); 
        }; 
       }; 
      } 
      console.log('tempModalDefaults'+JSON.stringify(tempModalDefaults)); 
      console.log('tempModalOptions'+JSON.stringify(tempModalOptions)); 
      /* return the modal object */ 
      return $modal.open(tempModalDefaults).result; 
     }; 

    } 
]); 

Answer 1

发现的问题，我不得不ui.bootstrap.modal作为依赖。它应该是ui.bootstrap。