Question

在我的html页面（rollup.html）上，我有一个打开模态的按钮。

<button id="myBtn" ng-click="printDivModal('rollup-tab')">ModalTest</button>

在js页面（rollup.js）这里是允许在单击按钮时打开模态的代码

$scope.printDivModal = function(divName) {
            console.log('opening pop up');
            var ModalInstance = $uibModal.open({
                //animation: $ctrl.animationsEnabled,
                templateUrl: 'app/views/modals/stackedModal.html',
                size: 'lg',
            });
        }

模态显示了在stackedModal.html中编写的内容

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
       <h4 class="modal-title">The Modal Header</h4>
</div>

<div class="modal-body">
    <p>Text inside the modal.</p>
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

我希望按钮能够使用广播打开模式以显示表格中的数据。在stackedModal.js中，我正在努力实现这一目标。我正在js中创建一个控制器

var app = angular.module('dmdesktop');

app.controller('Rollup', rollUpCtrl);
rollUpCtrl.$inject = ['$scope', '$rootScope', '$http', '$uibModal','headersvc','locFiltersvc']
function rollUpCtrl($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {

        $rootScope.$broadcast('printerFriendly', service.searchFilter);
        $scope.$on('printerFriendly', function(event, filter){
            $scope.searchFilter = filter;
            $scope.getData();

            $scope.gridOptions.data = data;
        });


}

目前只显示没有数据的模态。任何帮助表示赞赏。

Answer 1

您应该解析$ uibModal.open配置解析块中的数据。您还应该为要打开的模态指定控制器。看看这段代码，看看我在说什么：

templateUrl : 'templates/CustomModal.html',
size: size,
controller: 'YourModalCtrl'
resolve: {
    DataYouNeed: function(SomeDependency) { 
                // this should return a promise
        return SomeDependency.query();
    }
}

然后，您应该定义＆＃39; YourModalCtrl＆＃39;注入＆＃39; DataYouNeed＆＃39;作为依赖。看起来像这样：

.controller('YourModalCtrl', function (DataYouNeed) {
    // DataYouNeed will be resolved BEFORE controller initialization
    // thus, your modal will have the data before it opens.
    // add any modal specific logic here.
});

值得注意的是，您指定的模态控制器将具有孤立的$ scope。换句话说，这个控制器无法访问你放在$ scope上的数据（它拥有它自己的isolate $ scope对象）。因此，您需要在“解决方案”中定义模态所需的任何数据。 block（显示在第一个代码段中）。

单击将使用模式广播的按钮显示数据

1 个答案: