How to use controller-like syntax with $ ionic modal

I am writing an application with AngularJS 1.5.3. I use the $ ionicModal service to show modalities to my users.

I want to move my code to the controller-like syntax, but I'm not sure how to do this using the $ ionicModal service.

Here is my controller code:

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

    }

})();
+4
source share
2 answers

I want to move my code to the controller-like syntax, but I'm not sure how to do this using the $ ionicModal service.

Short answer

NO

Detailed response

Ionic creates a modal scope, causing:

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

When you use ControllerAsfor your root controller, suppose you have an instance of vmscope (ae vm = this;).

vm scope!!!.

vm - , .$new()

{scope: vm}, {scope: $scope}


, ,

+3

scope option,

scope . : $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();
    };
}
+1

Source: https://habr.com/ru/post/1681849/


All Articles