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

时间:2016-03-15 21:28:03

标签: javascript jquery html angularjs twitter-bootstrap

在我的主页面(Index.html)上,单击特定图标,我将通过调用相应的控制器方法打开一个uibmodal(bootstrap)弹出窗口。弹出窗口打开完美。之后无法从父控制器捕获弹出控件的按钮单击事件(同意,不同意)。

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>

基本上我想知道用户点击了弹出窗口是否同意或不同意,以便。基于 vm.agree()和vm.cancel()没有被调用,也没有错误。我对示波器或控制器引用有什么问题吗?请帮助!

2 个答案:

答案 0 :(得分:2)

尝试将CammeraController $范围添加到模态实例,并将函数绑定到$ scope,如下所示:

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() { ... }

答案 1 :(得分:1)

编辑: 是的情况是您使用两个不同的controllerAs属性注册相同的控制器,因此angular可能会将错误抛出,但并非每个错误都显示在控制台上。 我想你能做的就是: 1)为模态创建一个新的控制器(函数),并在模态内移动函数 2)使用bindToController将函数从摄像机控制器传递给模态控制器。