Question

我无法弄清楚为什么我的数组中的内容不会在模态中输出。我正在做一个ng-repeat。按钮从数组中拉出，但模态内的内容为空白。谁能告诉我乳清？

这是一个小提琴手： http://jsfiddle.net/8s9ss/203/

<div ng-app="app">

       <div ng-controller="RecipeController">  
        <div ng-repeat="recipe in ChickenRecipes">
            <button class="btn btn-default" ng-click="open()">{{ recipe.name }}</button> <br />

                <!--MODAL WINDOW--> 
                <script type="text/ng-template" id="myModalContent.html">
                    <div class="modal-header">
                        <h3>Recipe: {{ recipe.name }}</h3>
                    </div>
                    <div class="modal-body">
                          Recipe Content<br />

                            {{ recipe.cookTime }}
                            {{recipe.directions}}
                    </div>
                    <div class="modal-footer">

                    </div>
                </script>

        </div>  
        </div>


</div>

Answer 1

你正在混淆一些概念，将模态模板放在ng-repeat内不会做任何事情。这不是模态的工作方式。

首先，从ng-repeat中移除模板并将其放在其他地方。

然后，您必须为模态创建一个控制器：

app.controller('RecipeModalController', function($scope, $modalInstance, $modal, item){
    $scope.recipe = item;
    console.log(item);
});

并将您要打开的食谱作为ng-click上的参数传递：

$scope.open = function (recipe) {
    var modalInstance = $modal.open({
        controller: 'RecipeModalController',
        resolve: {item: function() {return recipe} },
        templateUrl: 'myModalContent.html',
    });
};

我已经更新了小提琴以显示它：http://jsfiddle.net/8s9ss/204/

Answer 2

$modal为模态创建子范围（默认为$rootScope的子项）

所以你需要的是这样的东西：

$scope.open = function (recipe) {
    $scope.recipe = recipe;
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      scope: $scope,
    });
};

和

<button class="btn btn-default" ng-click="open(recipe)">{{ recipe.name }}</button> <br />

P / s：最好使用$modal resolve和controller选项（将已解析的数据传递给新控制器）

数组不以模态输出

2 个答案: