StrugglingCoder
StrugglingCoder

Reputation: 5021

scope.apply is not working in Angular Event Handler

I have a parent page _jobs.html which has a ng-include

<div id="jobs-details" ng-controller="JobsController as jobsCtrl">
        <container container-id="jobs-details-container-portlet" height="1000px" columns="12" css-class="base-container">
            <portlet label="Job chart" height="1000px" columnspan="12" css-class="summary-pie-chart sub-tab-nav">
                <div>
                    <div ng-if="jobsCtrl.showSummaryTab">
                        <div ng-include src="'src/jobs/templates/jobs-details-filters.html'">
                        </div>
                    </div>                                  
                </div>

in jobsCtrl, I am reading a value selectedJobType from stateParams and I am broadcasting it.

$rootScope.$broadcast("stateObjJobTypeReceived",stateObj.selectedJobType);

Now, inside jobs-details-filters.html controller:

If I try to read the value and assign to a variable like:

    $rootScope.$on("stateObjJobTypeReceived",function(event,_eventData) {    
            $timeout(function() {
                self.jobTypeSettings.selectedData = {"JobType_1": Array(0)};
                $scope.$apply();
            },0);                  
    });

It does not work.

But if I simply do for testing purpose without putting inside an event handler,

            $timeout(function() {
                self.jobTypeSettings.selectedData = {"JobType_1": Array(0)};
                $scope.$apply();
            },5000); 

it works. Value changes after 5 seconds

Inside, event listener it seems not to work.

Basically I am trying to pass the value from jobsCtrl and assign accordingly to a variable and rootscope broadcast seems to me an only way.

Please help.

Upvotes: 0

Views: 83

Answers (0)

Related Questions