Question

我在使用routeProvider显示模态窗口时遇到问题。我正在显示成分的表格列表，并希望通过点击一个成分，我可以显示“更新”模式。表格显示正常，我甚至可以在模态上下文之外查看单个成分，但是一旦我尝试获得模态工作，一切都崩溃了 - 事实上，模态甚至没有正确地接收其“成分”变量。单击表格行时，模式的HTML将显示为单独的页面。


app.js:

angular.module('IngredientsApp', [
    'IngredientsApp.controllers',
    'IngredientsApp.services',
    'ngRoute',
    'ui.bootstrap'
]).config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when("/ingredients", {templateUrl: "partials/ingredients.html", controller: "ingredientsController"}).
    when("/ingredient/:id", {templateUrl: "partials/ingredient.html", controller: "ingredientController"}).
    otherwise({redirectTo: '/ingredients'});
}]);


services.js:

angular.module('IngredientsApp.services', []).factory('ingredientAPIservice', function($http) {

var ingredientAPI = {};

ingredientAPI.getIngredients = function() {
    return $http.get('/ingredient');
}

ingredientAPI.getIngredient = function(id) {
  return $http.get('/ingredient/'+id+'/edit');
}

return ingredientAPI;


});

的index.html

var ingredientAPI = {};

ingredientAPI.getIngredients = function() {
    return $http.get('/ingredient');
}

ingredientAPI.getIngredient = function(id) {
  return $http.get('/ingredient/'+id+'/edit');
}

return ingredientAPI;

ingredients.html

<!doctype html>
<html lang="en">
    <head>
        <title>Our Recipes</title>
        <script type="text/javascript" src="/js/angular.min.js"></script>
        <script type="text/javascript" src="/js/angular-route.min.js"></script>
        <script type="text/javascript" src="/js/angular-bootstrap.min.js"></script>
        <script type="text/javascript" src="/js/app.js"></script>
        <script type="text/javascript" src="/js/services.js"></script>
        <script type="text/javascript" src="/js/controllers.js"></script>
        <link rel="stylesheet" type="text/css" href="/css/styles.css" />
    </head>
    <body ng-app="IngredientsApp">
        <ng-view></ng-view>
    </body>
</html>

ingredient.html

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Existing Ingredients</th>
            <th><input type="text" ng-model="descriptionFilter" placeholder="Search..."/></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="i in ingredientsList | filter: searchFilter">
            <td>
                <a href="/#/ingredient/{{i.Id}}">
                    {{i.Description}}
                </a>
            </td>
            <td>Created at {{i.CreatedAt}}</td>
        </tr>
    </tbody>
</table>

<script type="text/ng-template">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        {{ingredient.Description}}
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Dismiss</button>
    </div>
</script>

Answer 1

我相信您的问题出在app.js.您的路线更改会导致模态模板（partials / ingredients.html）成为ui-view中显示的 only 模板。要使模式起作用，您需要将成分模板嵌套在成分模板中，以便可以同时显示两个模板。有多种方法可以实现这一目标。

如果您愿意放弃路线更改，只需删除
即可
when("/ingredient/:id", {templateUrl: "partials/ingredient.html", controller: "ingredientController"})
如果您需要更改网址，那么我会通过内置位置服务手动执行此操作。 https://docs.angularjs.org/guide/ $位置

你可以调用一个在点击成分时更改网址的函数。

带有routeProvider的Angularjs模态窗口

1 个答案: