0

我的家中有一个节点列表，当您单击一个节点的标题时，应该打开一个模式来显示该节点的详细信息，我正在这样工作：

var eventsApp = angular.module('EventsApp.controllers', ['infinite-scroll','ui.bootstrap','ngRoute']);
eventsApp.controller('eventsController', ['$scope','$modal','eventsAPIservice', function($scope, $modal, eventsAPIservice){
    $scope.openModal = function(id, size, animationsEnabled){
            var modalInstance;
            modalInstance = $modal.open({
                animation: animationsEnabled,
                templateUrl: 'templates/eventModal.html',
                controller: 'eventModalInstanceController',
                size: size,
                resolve: {
                    event: function(){
                        /* Here I make the call to the api */
                        eventsAPIservice.getEventById(id).success(function(response){
                            console.log(response);
                            return response;
                        });
                    }
                }
            });
    };
}]);

模态实例是这样的：

eventsApp.controller('eventModalInstanceController', ['$scope', '$modalInstance', 'event', function($scope, $modalInstance, event){

    $scope.eventDetail = event;
    console.log(event);
    $scope.save = function(param){
        console.log(param);
    };

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

问题是，当我在解析时console.log(response)正确显示数据，但它没有正确传递给eventModalInstanceController作为参数'event'，所以当我console.log(event)它显示 undefined on安慰。

我的模态模板是这样的：

<div class="modal-header">
  <h3 class="modal-title">{{ eventDetail.title }}</h3>
</div>
<div class="modal-body">
  <p>{{ eventDetail.eid }}</p>
  <p>{{ eventDetail.description }}</p>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok()">OK</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

我的问题是我必须在哪里进行 API 调用以及我应该如何将它传递给实例控制器

4

2 回答 2

0

之所以：

它应该是变量的可见性，resolve因此如果您需要访问，modalInstance则必须生成一个可以访问该变量的函数。

所以在你的情况下：

$scope.openModal = function(id, size, animationsEnabled){
    var modalInstance;
    modalInstance = $modal.open({
        animation: animationsEnabled,
        templateUrl: 'templates/eventModal.html',
        controller: 'eventModalInstanceController',
        size: size,
        resolve: {
            event: function(){
                /* Here I make the call to the api */
                eventsAPIservice.getEventById(id).success(function(response){
                    console.log(response);
                    updateEvent(response);
                    return response;
                });
            }
        }
    });

    function updateEvent(response) {
        modalInstance.eventDetail = response
    };
};
于 2015-05-16T01:31:12.860 回答
0

我找到了解决方案，只是将所有eventModalInstanceController移到$modal.open的“控制器”属性中，如下所示：

$scope.openModal = function(selectedEvent, size, animationsEnabled){
            var modalInstance;
            modalInstance = $modal.open({
                animation: animationsEnabled,
                templateUrl: 'templates/eventModal.html',
                controller: function($scope, $modalInstance, event){

                    $scope.event = event;
                    $scope.save = function(param){
                        console.log(param);
                    };

                    $scope.cancel = function(){
                        $modalInstance.dismiss('cancel');
                    };
                },
                size: size,
                resolve: {
                    event: function(){
                        return selectedEvent;

                    }
                }                      
            });
};

我不知道这是否是一个好习惯，但它确实有效。

于 2015-05-16T03:46:50.437 回答