CODEWITHSUNDEEP
angularjs
allencoded
allencoded

Reputation: 7275

ng-click toggle variable and update entire page

I have a global variable called RecruiterDashboard.IsColdList. It is a boolean that decides rather to run one directive or another. When the page is loaded the variable is made either true or false through normal scripting.

What I want to do is allow the user to toggle through an ng-click rather to show this other directive or not, so I made an ng-click and set RecruiterDashboard.IsColdList from 'false' to 'true'. Problem is this doesn't reload the angular page and fire the controllers off. How do make the page run through the controllers again?

This is what I have so far:

$scope.showColdList = function (projId) {
        RecruiterDashboard.isColdList = true;
    };

I want to point out that I am not using angular routing. I am using C# MVC.

My logic looks like so:

callPanelControllers.controller('callPanelController', function($scope) {
    $scope.isColdList = RecruiterDashboard.isColdList;
});

callPanelControllers.controller('incomingCall', function ($scope) {
     $scope.showColdList = function () {
        RecruiterDashboard.isColdList = true;
    };
});

<div ng-click="showColdList()" ng-controller="incomingCall"></div>
<div ng-controller="callPanelController">
    <cold-list ng-show="isColdList"></cold-list>
</div>

Upvotes: 0

Views: 214

Answers (1)

harishr
harishr

Reputation: 18055

i had developed sort of a hack, so that the entire content inside of a given element is reloaded on change of a certain variable.

csapp.directive("csReloadOn", ["$timeout", function ($timeout) {

    var getTemplate = function () {
        return '<div ng-if="doRefreshPageOnModeChange"><div ng-transclude=""></div></div>';
    };

    var linkFunction = function (scope, element, attrs) {
        scope.doRefreshPageOnModeChange = true;

        scope.$watch(attrs.csReloadOn, function (newVal, oldVal) {
            if (newVal === oldVal) return;

            scope.doRefreshPageOnModeChange = false;
            $timeout(function () { scope.doRefreshPageOnModeChange = true; }, 100);
        });
    };

    return {
        restrict: 'A',
        transclude: true,
        template: getTemplate,
        link: linkFunction
    };
}]);

you can use it like

     <div cs-reload-on="{{pagemode}}"> 
           <!-- your html here-->     
      </div>

so it just removes and re-renders the complete content inside of the div, so everything is reinitialized etc etc.

Upvotes: 1

Related Questions