CODEWITHSUNDEEP
angularjsng-hide
Johan Byrén
Johan Byrén

Reputation: 918

Best way to ng-hide my headMenu from different controller

I want to hide my headmenu. 

app.controller("kpiOverviewCtrl", function ($scope, $stateParams,) {
"use strict";

   var setUpController = function () {
       $scope.headmenu = $state.current.controller === "kpiCompareCtrl";
   };

   $rootScope.$on('$locationChangeSuccess', function () {
       setUpController();
   });

   $rootScope.$on('$stateChangeSuccess', function () {
       setUpController();
   });

   setUpController();
});

As you can see on the code it sets headmenu to true on a controller switch. It works fine. But now I want to set headmenu to true on a ng-click statment from a controller thats already been loaded. 

app.controller("kpiDetailsCtrl", function ($scope, $state) {
"use strict";

 $scope.loadDataForMonthView = function () {
    $scope.errorNoDataForDate = false;
    $scope.yearMode = false;
    $scope.monthMode = true;

    //Here I want to set $scope.headmenu = true;

   //Other code.....
};

Any nice suggestions?

Upvotes: 0

Views: 69

Answers (3)

Slava Utesinov
Slava Utesinov

Reputation: 13498

You can declare new method to $rootScope inside kpiOverviewCtrl:

app.controller("kpiOverviewCtrl", function ($scope, $stateParams, $rootScope) {
     "use strict";
     //your code...........
     $rootScope.setUpController = setUpController;   
});

And then call it from kpiDetailsCtrl controller:

app.controller("kpiDetailsCtrl", function ($scope, $state, $rootScope) {
"use strict";

 $scope.loadDataForMonthView = function () {
        $scope.errorNoDataForDate = false;
        $scope.yearMode = false;
        $scope.monthMode = true;

        $rootScope.setUpController();
    }
});

Upvotes: 0

Jeffrey Roosendaal
Jeffrey Roosendaal

Reputation: 7157

Use a broadcast. They're a great way for communication between controllers.

Create a regular function in your main controller, which you can call from within the controller itself.

app.controller('Main', function($scope) {
    function setHeadMenu() {
         // Set menu to true
    }

    $scope.$on('setHeadMenu', function() {
        setHeadmenu(); // Fires on broadcast
    })
});

Create an ng-click which fires a broadcast from the other controller

app.controller('Second', function($scope) {
    $scope.click = function() {
        $scope.$broadcast('setHeadMenu'); // Send a broadcast to the first controller
    }
});

Upvotes: 1

David Votrubec
David Votrubec

Reputation: 4166

First dummy suggestion:

$scope.loadDataForMonthView = function () {
 $scope.headmenu = true; //(or false)
}

But most likely you are using some asynchrounous call, so something like this would be better:

$scope.loadDataForMonthView = function () {
 // First: you need some promise object
 // the most simple is to use $http
 var promise = $http({url: 'some.url', method: 'GET'});

 promise.then(function() {
  // the data have arrived to client
  // you can hide or show menu according to your needs
  $scope.headmenu = true; //(or false)
 })
}

More on how $http works is in the docs https://docs.angularjs.org/api/ng/service/$http

Upvotes: 0

Related Questions