In AngularJs, how do I identify a specific scope within a controller that is used multiple times on a page?

Question

I have an application that uses multiple tabs with a grid in each tab. I have multiple pages using this same configuration.

I have a single controller that works for all grids. I would like to reuse this controller throughtout my application.

My problem is that I am trying to lazy load the data for each tab until the tab is clicked. What I can't figure out is how to tell the controller which scope belongs to which tab and ONLY get the data for that grid. I know internally AngularJs does this because if I just load all the data for each tab at once I can click on my paginator, search, etc. for each tab and only that scope is updated.

I have ng-click setup for each tab and I can get my controller to fire when a tab is clicked. However, the controller calls all instantiated scopes to load data for their respective grids.

My approach may not be the best but it seems silly to create seperate controllers that do exactly the same thing.

Note: Angular UI tabs with bootstrap is not an option.

My view


    
        
            Localized Text From Server
            Localized Text From Server
            Localized Text From Server
        
        
            @Html.Partial("_Grid0")
            @Html.Partial("_Grid1")
            @Html.Partial("_Grid2")

My app and factory url

var TabsApp = angular.module("TabsApp", ['ngResource', 'ngRoute']);

TabsApp.factory('Api', function($resource){
    return $resource('/api/user/:userId/:ctrl', { userId: '@userId', ctrl: '@ctrl'});
});

My controller - child scope(s)

var ListCtrl = function ($scope, $location, Api){
    $scope.search = function () {
        Api.get({
            userId: $scope.userId,
            ctrl: $scope.ctrl,
            q: $scope.query
            //etc.
            },
                function(data){
                    $scope.items = data.items;
                    //other mapping
                });
    };

    $scope.init = function(userId, ctrl){
        $scope.userId = userId;
        $scope.ctrl = ctrl;
    };
    $scope.reset = function(){
        $scope.items = [];
        $scope.search();
    };

    //kind of a hack but broadcasting was the only way I could figure out to listen for tab changes
    $scope.tabModelChange = { 'isChanged': false };
    $scope.$on('tabModelChange', function(event, args) {
        $scope.tabModelChange.isChanged = true;
        var activeTab = args.val[$scope.selectedTab];
        if (!activeTab.isLoaded) {
            $scope.reset();
        }
    }); 

    //filtering, sorting, pagination, etc.
};

My directive: Parent scope

TabsApp.directive('tabs', function () {
    return {
        controller: function ($scope, $element) {
            $scope.selectedTab = 0;
            $scope.tabModel = [];

            //I use localized text and any number of tabs on my views from the server so the client wont know how many tabs each view will have
            var tabs = angular.element($element.children()[1]).children();
            angular.forEach(tabs, function (value, key) {
                $scope.tabModel.push({'isLoaded' : false, 'isActive': false});
            });
            $scope.clickTab = function(tab) {
                $scope.selectedTab = tab;
                $scope.tabModel[$scope.selectedTab].isActive = true;
            };
            $scope.$watch('tabModel', function(newVal, oldVal) {
                if (newVal !== oldVal) {
                    $scope.$broadcast('tabModelChange', { 'val': newVal });
                }
            }, true);
        }
    };
});

I suspect that when my controller receives a broadcast that the tab model has changed it calls $scope.reset with $scope being a parent scope which then traverses the child scopes looking for 'reset'. Because there are 3 instances of ListCtrl, parent scope finds 3 child scopes with 'reset'. Hence, all the data gets loaded at once.

How can I get $scope.reset to match the tab that was clicked? Thanks.

Jesus is Lord · Accepted Answer

With minimal change to your existing code, here's a plunker that does what you want, I think.

http://plnkr.co/edit/TVwWQehgWJay7ngA8g6B?p=preview

Basically I made a second directive called tab that accepts an argument which is a function to evaluate when that tab is switched to.

TabsApp.directive('tab', function () {
    return {
        require: '^tabs',
        link: function (scope, element, attrs, tabsCtrl) {
            tabsCtrl.add({
                'isLoaded' : false, 
                'isActive': false, 
                'changed': function () { scope.$eval(attrs.tab); }
            });
        }
    };
});

In AngularJs, how do I identify a specific scope within a controller that is used multiple times on a page?

Answers (2)

Related Questions