如何在 $ionic modal 中使用“controller as”语法答案

【问题标题】：How to use the 'controller as' syntax with $ionic modal如何在 $ionic modal 中使用“controller as”语法
【发布时间】：2017-12-25 19:14:22
【问题描述】：

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

我想将我的代码移动到“controller as”语法中，但我不确定如何使用 $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();
        };

    }

})();

【问题讨论】：

标签： javascript angularjs ionic-framework modal-dialog

【解决方案1】：

我想将我的代码移动到“controller as”语法中，但我不确定如何使用 $ionicModal 服务来做到这一点。

简答

没有

详细解答

Ionic 通过调用创建模态范围：

var scope = options.scope && options.scope.$new() || $rootScope.$new(true);

当您将ControllerAs 用于您的根控制器时，假设您有vm 范围的实例（即vm = this;）。

vm 不是scope！！！。

vm 只是对象，没有作用域继承，没有.$new() 方法

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

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

【讨论】：

【解决方案2】：

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

scope 要成为其子级的范围。默认值：创建 $rootScope 的子级。

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

考虑到控制器有$ctrl控制器作为标识符，应该是这样的：

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();
    };
}

【讨论】：