javascript - 访问一个 Controller 的 ng-hide 值以在全局 Controller 中操作另一个 Controller 的 ng-style

Question

所以我试图从一个 Controller 访问 ng-hide 的 bool 值，以使用全局 Controller 更改另一个 Controller 的 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']);
});

我可以从 mainCtrl 更改 changeColor 和 hideSecond 但我无法访问从 设置的值mainCtrl 中的 secondCtrl。我什至尝试在 ng-hide 中设置 hideSecond=true 并在 mainCtrl 上访问它，但无济于事。

有人可以帮我解决这个问题吗？

Answer 1

您可以为此使用 Angular 服务，将值存储到服务中，而不是从另一个 Controller 中的服务中检索它。

在您的情况下，主 Controller 在第二个 Controller 之前加载，因此它永远不会知道值何时更新。您可以为此使用 $watch，在 $scope 更新时调用更新函数。

如果你的 fiddle 更新了: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
    }
})

在主 Controller 中使用它:

$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'
    };
  }
}

在第二个 Controller 中使用它:

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

确保将服务注入(inject)应用，并将服务注入(inject) Controller 。