Доступ к значению ng-hide одного контроллера для управления ng-типом другого контроллера в глобальном контроллере

Question

Итак, я пытаюсь получить доступ к логическому значению ng-hide из одного контроллера, чтобы изменить свойства css другого контроллера, используя глобальный контроллер , Вот ссылка на jsfiddle: https://jsfiddle.net/dqmtLxnt/

HTML

<div ng-controller="mainCtrl"> 
    <div class="first" ng-style="changeColor" ng-controller="firstCtrl"> 
     {{ accessOne }} 
    </div> 
    <div class="second" ng-hide="hideSecond" ng-controller="secondCtrl"> 
     {{ accessTwo }} 
    </div> 
</div> 

JS

angular.element(document).ready(function() { 
    angular.module('app', []) 
     .controller('mainCtrl', ['$scope', function($scope) { 
      if ($scope.hideSecond == true) { 
       $scope.changeColor = { 
        'color': 'blue' 
       }; 
      } 
     }]).controller('firstCtrl', ['$scope', function($scope) { 
      $scope.accessOne = "One"; 
     }]).controller('secondCtrl', ['$scope', function($scope) { 
      $scope.accessTwo = "Two"; 
      $scope.hideSecond = true; 
     }]); 
    angular.bootstrap(document.body, ['app']); 
}); 

Я могу изменить как changeColor и hideSecond от mainCtrl, но я не в состоянии получить доступ установленное значение от secondCtrl в mainCtrl. Я даже попытался установить hideSecond=true в ng-hide и получить к нему доступ на mainCtrl, но безрезультатно.

Может кто-нибудь помочь мне в этом?

Answer 1

Для этого вы можете использовать Угловое обслуживание, сохраняя значение в службе и получая его от службы на другом контроллере.

В вашей ситуации главный контроллер загружается перед вторым контроллером, чтобы он никогда не узнал, когда значение будет обновлено. Вы можете использовать $watch для этого, вызывая функцию обновления при обновлении $scope.

Вот если ваша скрипка обновления: https://jsfiddle.net/dqmtLxnt/2/

Услуга:

angular.module('app.services', []) 

.factory('hide', function() { 

    // Allows for passing of data between controllers 
    var x = false; 
    // Sets savedData to what ever is passed in 
    function set(data) { 
     x = data; 
    } 
    // Returns saved data 
    function get() { 
     return x; 
    } 

    return { 
     set: set, 
     get: get 
    } 
}) 

С его помощью в главном контроллере:

$scope.$watch(function() { return hide.get(); }, 
    function (value) { 
     console.log(value); 
     $scope.update(value); 
    }); 

$scope.update = function(value) { 
    if (value == true) { 
    $scope.changeColor = { 
     'color': 'blue' 
    }; 
    } 
} 

С его помощью во Втором контроллере:

$scope.hideSecond = true; 
hide.set(true); 

Убедитесь, что вы вводите службу в приложение и службу в контроллеры.