从不同控制器隐藏我的 headMenu 的最佳方法

Question

我想隐藏我的主菜单。

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();
});

正如您在代码中看到的那样，它在控制器开关上将 headmenu 设置为 true。它工作正常。但是现在我想在已经加载的控制器的 ng-click 语句中将 headmenu 设置为 true。

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.....
};

有什么好的建议吗？

Answer 1

第一个虚拟建议：

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

但很可能您正在使用一些异步调用，所以像这样会更好：

$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)
 })
}

有关 $http 工作原理的更多信息，请参阅文档 https://docs.angularjs.org/api/ng/service/$http

Answer 2

使用广播。它们是控制器之间通信的好方法。

在您的主控制器中创建一个常规函数，您可以从控制器本身调用它。

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

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

创建一个从另一个控制器触发广播的 ng-click

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

Answer 3

您可以在 kpiOverviewCtrl 中为 $rootScope 声明新方法:

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

然后从 kpiDetailsCtrl 控制器调用它：

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

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

        $rootScope.setUpController();
    }
});

从不同控制器隐藏我的 headMenu 的最佳方法

Best way to ng-hide my headMenu from different controller

angularjs

ng-hide