从父控制器AngularjS访问弹出控件

Question

On my main page (Index.html) , on click of a specific icon i am opening a uibmodal (bootstrap) pop-up by calling a respective controller method. The popup is opening perfectly fine. After that couldn't capture the pop-control's button click events (Agree,Disagree) from the parent controller.

Controller.js:

function CameraController($scope,$uibModal) {
        var vm = this;

        vm.captureScreenShot = captureScreenShot;
        vm.openCameraAgreement = openCameraAgreement;


        /* Opens the agreement before capturing the screen shot */
        function openCameraAgreement() {
            //open the agreement
            var instance = $uibModal.open({
                animation: true,
                templateUrl: 'app/components/capture/cameraAgreement.html',
                controller: CameraController,
                controllerAs: 'vm',
                size: 'sm-2'
            });
            vm.cancel = function () {
                instance.close();
            };
            vm.agree = function () {
                instance.close();
                captureScreenShot() //call this method to do something
            };
        }

        function captureScreenShot($event) {
            //do something to capture the screen shot
        }
}

Index.html:

<li ng-controller="CameraController as camera">
<a ng-click="camera.openCameraAgreement()">
</a>
</li>

cameraAgreement.html

<a class="btn btn-primary saveCamera" ng-click="vm.agree()">Agree</a>
<a class="btn btn-primary" ng-click="vm.cancel()">Disagree</a>

Basically i wanted to know if the user clicked agree or disagree on the pop-up, so that. Based on vm.agree() and vm.cancel() are not being called, no errors too. Am i doing any thing wrong with the scope or controller referencing ? Kindly help !

Answer 1

Try adding the CammeraController $scope to your modal instance, and bind your functions to the $scope, like this:

var instance = $uibModal.open({
            animation: true,
            templateUrl: 'app/components/capture/cameraAgreement.html',
            controller: CameraController,
            controllerAs: 'vm',
            size: 'sm-2',
 //Add the parent scope
            scope: $scope
        });
        $scope.cancel = function() { ... }

Answer 2

EDIT: Yes the scenario is that you're registering the same controller with two different controllerAs properties so angular might throw the error inside but not every error gets shown on the console. I think what you can do is you can : 1) either create a new controller (function) for modal, and move the functions inside modal 2) use bindToController to pass the functions from your camera controller to the modal controller.