加载模板angularjs ui-bootstrap

时间:2015-11-11 21:20:48

标签: javascript angularjs angular-ui-bootstrap

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');
          };
        });

enter image description here

0 个答案:

没有答案