How to choose the trigger order

Question

I have this directive:

module.directive("myDirective", function() {
    return {
        restrict: 'E',
        templateUrl: 'pathToUrl',
        controller: myCtrl,
        controllerAs: vm,
        bindToController: true,
        scope: {
            flag: '=',
            toggleFlagFunc: '='
        }
    }

    function myCtrl() {
        let vm = this;
        vm.olMap = new ol.Map({/*map init here*/})
        vm.olMap.on("click", clickFunc);

        function clickFunc() {
            if (vm.flag) {
                // Do some logic
                vm.toggleFlagFunc();
            }
        }
    }
}

This is the template url:

<div class="first-div"></div>
<div class="second-div"></div>
<div class="map-container-div"></div>
<div class="third-div"></div>

And this instance:

<my-directive flag="vm.flag" toogle-flag-func="vm.toogleFlagFunc" ng-click="vm.myDirectiveClicked()"></my-directive>

And this is the parent ctrl:

function parentCtrl {
    let vm = this;
    vm.flag = false; // The flag changed to true somewhere
    vm.toggleFlagFunc = () => {
        vm.flag = !vm.flag;
        // Some Other Logic
    }

    vm.myDirectiveClicked = () => {
        if (!vm.flag) {
            // Do some logic here
        }
    }
}

My problem is when vm.flag evaluates to true and I click on the map-container-div, the order of the called functions is vm.toogleFlagFunc and then vm.myDirectiveClicked.

Can I change the order some how?

Thanks in advance!

I don't think that you can just change the order because "vm.myDirectiveClicked" is inside a ngClick event that means it is inside the diggest cycle and "vm.toogleFlagFunc" is a onclick event outside of the diggest cycle. You can try a debounce on the second function if "vm.flag" is true — MrWook, Mar 20 '18 at 14:20
This seems like bad practice. Why not combine both functions into one, then you can easily control the order of execution — Pop-A-Stash, Mar 20 '18 at 14:37

How to choose the trigger order

0 Answers0