ng-click toggle variable and update entire page

Question

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>

angular should "reload". Can you add the rest of the relevant code? — Acsisr
– Acsisr, Commented Aug 4, 2014 at 14:02
well it fires the stuff in that single controller but not the other controllers — allencoded
– allencoded, Commented Aug 4, 2014 at 14:03
How are you controlling which directive is shown? Can you paste more of the code, as Acsisr suggested? — Christopher Gillis
– Christopher Gillis, Commented Aug 4, 2014 at 14:07

harishr · Accepted Answer · 2014-08-04 15:52:23Z

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.

Collectives™ on Stack Overflow

ng-click toggle variable and update entire page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related