如何从模态弹出窗口调用 controller.js 内定义的函数

Question

这是我在 controller.js 中使用的模式弹出窗口。我只想在单击按钮时调用在同一控制器中定义的函数 send() 。但是 ng-click 在 modalpopup 中不起作用。

$scope.sendMessage = function(order_id) { 
        var modalInstance = $uibModal.open({
            template: '<div id="order-flow-modal" class="inmodal">' +
                    '<div class="modal-header">' +
                    '<h4 class="modal-title">Order Description</h4>' +
                    '<small class="font-bold"></div>' +
                    '<div class="modal-body"><textarea name="message" ng-model="formData.message"  style="width:100%;"></textarea></div><div style="clear:both;"><input type="text" ng-model="formData.order_id" value="'+order_id+'"></div>' +
                    '<div class="modal-footer">' +
                    '<a class="btn btn-success" ng-click="send()">Send</a>' +
                    '<button type="button" class="btn btn-white" ng-click="cancel()">Close</button>' +
                    '</div>' +
                    '</div>',
            windowClass: "animated flipInY",
            controller: ModalInstanceCtrl,
            backdrop: true
        });
        modalInstance.opened.then(function() {

        });
        modalInstance.result.then(function() {

        }, function() {

        });
        return false;
    };

下面是我的 send()。

$scope.send = function() { 
        alert('hi');
        return false;
    };

Answer 1

您可以通过解析配置参数将您的功能提供给模态控制器。

或者您可以为模态提供已定义发送函数的现有范围。

$uibModal.open({
...
    scope: $scope
...
})

Answer 2

您可以在此处使用 broadcast 和 on 事件发射器。

从您的 ModalInstanceCtrl 广播并在您当前的控制器中收听。

您当前的控制者，

  allControllers.controller('myController', ['$scope','$rootScope',
    function($scope,$rootScope) {
        $scope.sendMessage = function(order_id) { 
                var modalInstance = $uibModal.open({
                    template: '<div id="order-flow-modal" class="inmodal">' +
                            '<div class="modal-header">' +
                            '<h4 class="modal-title">Order Description</h4>' +
                            '<small class="font-bold"></div>' +
                            '<div class="modal-body"><textarea name="message" ng-model="formData.message"  style="width:100%;"></textarea></div><div style="clear:both;"><input type="text" ng-model="formData.order_id" value="'+order_id+'"></div>' +
                            '<div class="modal-footer">' +
                            '<a class="btn btn-success" ng-click="send()">Send</a>' +
                            '<button type="button" class="btn btn-white" ng-click="cancel()">Close</button>' +
                            '</div>' +
                            '</div>',
                    windowClass: "animated flipInY",
                    controller: ModalInstanceCtrl,
                    backdrop: true
                });
                modalInstance.opened.then(function() {

                });
                modalInstance.result.then(function() {

                }, function() {

                });
                return false;
        };

        $scope.$on('send_called', function(event, args) {

        alert('Hi')

        });
     }])

ModalInstanceCtrl:

allControllers.controller('ModalInstanceCtrl', ['$scope','$rootScope',
    function($scope,$rootScope) {

    $scope.send = function() { 
        $rootScope.$broadcast('send_called');
        return false;
    };
    }])

调用send方法后广播，在当前controller中可以接收

Refer this link

如何从模态弹出窗口调用 controller.js 内定义的函数

How do I call a function defined inside controller.js from a modal popup

javascript

angularjs

angular-ui-bootstrap