Ionic / Angular - $scope and This syntax

manpreet Best Answer 2 years ago

Learning Angular (along with Ionic).

I try and avoid using $scope and stick with controller as syntax ('this' as much as possible, along with Controller as in the HTML). A few days back, I added a service that i found online to aid in better managing my Modal dialogs. That code is attached.

angular.module('myApp').service('RefFilterModal', RefFilterModal);

function RefFilterModal($rootScope, $ionicModal) {
let templateUrl = 'client/templates/modals/refFilterModal.html';

this.showModal = showModal;
this.hideModal = hideModal;

////////////

function showModal () {
this._scope = $rootScope.$new();

$ionicModal.fromTemplateUrl(templateUrl, {
  scope: this._scope,
   animation: 'slide-in-up',
   focusFirstInput: false,
   backdropClickToClose: true
}).then((modal) => {
  this._modal = modal;
  modal.show();
});
}

 function hideModal () {
this._scope.$destroy();
this._modal.remove();
 }
 }

My dilemma is that with this service (that brings up the modal) $scope and 'this' aren't working the same as it does elsewhere. For example, a submit function - while the submit function does get called from the ng-click, the values of year and manufacturer are undefined. If I change the "this.submit" to "$scope.submit" they are defined.

Can someone please educate me as to why that is - I would expect to use THIS all around. Also, what can I do to the service to achieve my aim of sticking with controller as principle? Thanks.

this.submit = function() {

    RefFilters.setYearFilter(this.year);
    RefFilters.setMakerFilter(this.manufacturer);

    RefFilterModal.hideModal();
}

(the html has submit as "refFilter.submit", "refFilter.year", and "refFilter.manufacturer").