带有 routeProvider 的 Angularjs 模态窗口答案

【问题标题】：Angularjs modal window with routeProvider带有 routeProvider 的 Angularjs 模态窗口
【发布时间】：2014-08-04 13:08:45
【问题描述】：

我在使用 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

<!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>

成分.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>

成分.html

<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>


controllers.js:

angular.module('IngredientsApp.controllers', []).controller('ingredientsController', function($scope, ingredientAPIservice) {

$scope.descriptionFilter = null;
$scope.ingredientsList = [];


$scope.searchFilter = function (ingredient) {
    var keyword = new RegExp($scope.descriptionFilter, 'i');
    return !$scope.descriptionFilter || keyword.test(ingredient.Description);
};

ingredientAPIservice.getIngredients().success(function (response) {

    //Dig into the responde to get the relevant data
    $scope.ingredientsList = response;
});


})

var ingredientController = function($scope, $routeParams, $modal, ingredientAPIservice) {
    $scope.id = $routeParams.id;
    $scope.ingredient = null;

ingredientAPIservice.getIngredient($scope.id).success(function (response) {
    $scope.ingredient = response;
    $scope.open = function (size) {

        var modalInstance = $modal.open({

            templateUrl: 'partials/ingredient.html',
            controller: 'ingredientModalController',
            size: size,
            resolve: {
                ingredient: function () {
                    console.log($scope.ingredient);
                    return $scope.ingredient;
                }
            }
        });
    }
}); 


}

var ingredientModalController = function($scope, $modalInstance, ingredient) {
    $scope.ingredient = ingredient;

$scope.ok = function () {
    $modalInstance.close($scope.ingredient);
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};


}

【问题讨论】：

标签： angularjs modal-dialog angular-ui-bootstrap

【解决方案1】：

我相信您的问题出在 app.js 中。您的路线更改导致模态模板 (partials/ingredients.html) 成为 ui-view 中显示的 only 模板。为了使模式工作，您需要将成分模板嵌套在成分模板中，以便可以同时显示两个模板。有多种方法可以做到这一点。

如果你愿意放弃改路线，就去掉

when("/ingredient/:id", {templateUrl: "partials/ingredient.html", controller: "ingredientController"})
如果您需要更改 url，那么我会考虑通过内置位置服务手动进行。 https://docs.angularjs.org/guide/$location

你可以调用一个函数来改变点击成分的 url。

【讨论】：

那么你是说模式标记不可能存在于局部视图中吗？简单地删除您引用的行似乎没有任何效果。
我是说当您转到“/ingredient/:id”时，您当前的设置将删除所有其他模板。删除线是第一步。您仍然需要将您的两个模板和逻辑集成到一个中
这个解释有帮助吗？
抱歉，不，我发现这是很多问题，主要是我实际上并没有在我的模态触发器链接中提供ng-click="functionName();" 属性。我最终能够将我的 HTML 模板保留为单独的文件，但我确实将两个控制器合并为一个，因为我发现在我的 Angular 知识中，此时我无法将选定的 ID 从父级传递给子级。