stackoverflow中存在很多问题,我已经完成了大部分问题,但我无法找到错误的确切答案
我的应用中的ui-bootstrap-tpls-0.14.3.min.js
文件夹中有WebContent
。
我的jsp在WEB-INF->jsp->content.jsp
。我已经包含了必要的文件。我不明白的是模板,我应该创建一个新的模板文件,还是只要代码在content.jsp
中就足够了。
我所看到的只是这个例外
开发人员控制台中的http://localhost:10039/.{contextRoot}/myModalContent.html Failed to load resource: the server responded with a status of 404 (Not Found)
。
我不明白templatecache是如何工作的。我在这里错过了什么让它发挥作用
<script type="text/ng-template" id="${renderRequest.contextPath}/myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Results <small>Total Records: <strong>{{allrecords.length}}</strong></small></h3>
</div>
<div class="modal-body">
<p>Your selection: {{selected}}</p>
<p>Displaying records: {{startval}} - {{endval}}</p>
<ol start="{{startval}}">
<li ng-repeat="record in allrecords.slice(startval-1, endval)">{{record.Name}}</li>
</ol>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $uibModal, Data) {
$scope.animationsEnabled = true;
$scope.open=function(){
var modalInstance=$uibModal.open({
animation: true,
templateUrl: '${renderRequest.contextPath}/myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
loaddata: function(Data) {
return Data.get('allrecords');
},
selected: function () {
return $scope.model.id;
}
}
});
};
});
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, selected, loaddata) {
$scope.allrecords = loaddata.records;
$scope.selected = Number(selected);
$scope.startval = ($scope.selected)*5-4;
$scope.endval = $scope.startval+4;
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
app.factory('Data', ['$http',
function ($http) {
var obj = {};
obj.get = function () {
//obj.get = function(url) {
//return $http.get(url).then(function (results) {
//return results.data;
//});
return {
"records": [
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
}
};
return obj;
}]);
更新
我在下面创建了一个html文件myModalContent.html
WebContent->templates->myModalContent.html
我没有看到打开作为模态,但它在页面末尾打开就像附加到页面一样。
content.jsp
<div class="table-cell" ng-app="ui.bootstrap.demo" ng-controller="ModalDemoCtrl">
<select id="method" ng-change="open();" ng-model="model.id">
<option value="">-Select-</option>
<option ng-repeat="item in items" value="item.value">{{item.value}} </option>
</select>
</div>
<script type="text/ng-template" id="${renderRequest.contextPath}/templates/myModalContent.html"></script>
var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: '${renderRequest.contextPath}/templates/myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});