如何使用'控制器作为' $ ionic modal的语法

时间:2017-07-20 07:59:19

标签: javascript angularjs ionic-framework modal-dialog

我正在使用AngularJS 1.5.3编写应用程序。我正在使用$ ionicModal服务向我的用户显示模态。

我想将我的代码移到'控制器中作为'语法,但我不知道如何使用$ ionicModal服务。

这是我的控制器代码:

(function () {
    "use strict";

    angular
        .module('myApp')
        .controller('myController', myController);

    myController.$inject = [
        '$scope',
        '$ionicModal',
        'myService'
    ];

    function myController($scope, $ionicModal, myService) {

        $scope.data = myService.data;

        $scope.openModal = openModal;

        $ionicModal.fromTemplateUrl('./myPath/modal.html', function ($ionicModal) {
            $scope.modal = $ionicModal;
        }, {
            scope: $scope,
            animation: 'slide-in-up'
        });

        $scope.$on('$destroy', function () {
            $scope.modal.remove();
        });

        function openModal() {
            $scope.modal.show();
        };

    }

})();

2 个答案:

答案 0 :(得分:3)

  

我想将我的代码移到'controller as'语法中,但我不确定如何使用$ ionicModal服务。

简短回答

NO

详细答案

Ionic通过调用:

创建模态范围
var scope = options.scope && options.scope.$new() || $rootScope.$new(true);

当您使用ControllerAs作为根控制器时,假设您有vm范围的实例(a.e vm = this;)。

vm不是scope !!!

vm只是对象而且没有范围继承,它没有.$new()方法

所以我们不能写{scope: vm}而只能写{scope: $scope}

当然,您可以使用Ionic代码,但这可能会导致意外行为

答案 1 :(得分:1)

离子模态选项may include parent scope as scope option

  

范围成为孩子的范围。默认值:创建$ rootScope的子项。

在这方面类似于UI Bootstrap modal。所以它应该以任何方式使用$scope来设置适当的范围层次结构。在必要时将$scope与controllerAs语法一起使用没有任何问题。

考虑到控制器具有$ctrl controllerAs标识符,它应该类似于:

function myController($scope, $ionicModal, myService) {
    var self = this; // === $scope.$ctrl
    self.data = myService.data;
    self.openModal = openModal;

    $ionicModal.fromTemplateUrl('./myPath/modal.html', function (modal) {
        self.modal = modal;
    }, {
        scope: $scope,
        animation: 'slide-in-up'
    });

    self.$onDestroy = function () {
        self.modal.remove();
    });

    function openModal() {
        self.modal.show();
    };
}