CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
NOBLE M.O.
NOBLE M.O.

Reputation: 194

Call function in ng-view controller from directive

I have a directive as given below,

app.directive('metadataSelectPicker', ['ManagementService', '$timeout', '$location', function (ManagementService, $timeout, $location) {
return {
    restrict: 'E',
    replace: true,
    templateUrl: 'Views/NgTemplates/DirectiveTemplates/MetaDataSelectPicker.html',
    link: function (scope, elem, attr) {
        var promise = ManagementService.getMetaDataList();
        promise.then(function (response) {
            if (response.data.length > 0) {
                scope.metaDataList = response.data;
                $timeout(function () {
                  $('.selectpicker').on('change', function () {
                        $('.selectpicker').selectpicker('refresh');
                        $timeout(function () {
                            if (scope.selectedMetaData == 'Class') {
                                $location.path('/class');
                            } else {
                                $location.path('/metadata');
                            }
                        });
                    });
                });
            }
        }, function () {
            alert('Data fetching failed.');
        });
    }
}
}]);

The MetaDataSelectPicker.html is given below:

<div id="metaDataSelectPicker">
<div class="sel_allcustom_name">
    <select class="selectpicker show-tick form-control" ng-model="selectedMetaData">
        <option ng-repeat="metaData in metaDataList" value="{{metaData.ValueText}}">{{metaData.DisplayText}}</option>
    </select>
</div>
<div class="clearfix"></div>

I'm using this directive is in a page with controller named homeController. In this page I used ng-view tag to load different contents. The following code is used to redirect various pages in to ng-view tag.

if (scope.selectedMetaData == 'Class') {
                                $location.path('/class');
                            } else {
                                $location.path('/metadata');
                            }

In the routeProvider configuration, I have specified different controller for each ng-view path. Initally, I'm not loading any view to the ng-view. But I'm redirecting the ng-view page while changing the options in the select control. In the controller of /metadata page, I have a function and assigned to a scope variable. I need to call that function while changing the select option and if scope.selectedMetaData != 'Class'. I need to do it as follows,

if (scope.selectedMetaData == 'Class') {
                                $location.path('/class');
                            } else {
                                $location.path('/metadata');
                                scope.doSomething();
                            }

But while changing the option, the corresponding controller may not be loaded. So the scope.doSomething(); will not work. I don't like to use broadcast event. I need to tract the ng-view page load and perform the function after that. How can I do that? Or suggest me any other better method. Please help me.

Upvotes: 0

Views: 389

Answers (1)

itmilos
itmilos

Reputation: 489

You can use https://github.com/angular-ui/ui-router for routing and then you can use one of state change events ref. https://github.com/angular-ui/ui-router/wiki

Upvotes: 0

Related Questions