使用 ng-show 的相同函数可以在 Angular JS 中加载一个控制器，但不能加载另一个控制器

Question

我正在使用 Angular 创建一个页面，其中包含三个 控制器 。它们是使用 ng-show 指令加载的。每个 控制器 都有一个按钮和 ng-click 调用函数。功能很简单它隐藏一个控制器并使下一个可见。

问题：这个功能对一个控制器有效，但由于某种原因它对另一个控制器不起作用。准确地说，levelsView 控制器已加载，但 cardsView 未加载。如果我在 HTML 页面中将 ng-show 设置为 true，CardsView 就会变得可见，但是不是通过函数。我花了几天时间试图找到问题，但我找不到，请帮助我解决这个问题"mystery"。

HTML 页面:

  <main>
    <div class="bottom-container">
      <div ng-controller="rulesCtrl as rulesView" ng-hide="rulesView.gameMetrics.levelsActive || rulesView.gameMetrics.cardsActive"
           class="rules">
        <p><span class="bold large-text">Rules: </span>Find a pair for the HTML opening and closing tag or match CSS value with a property within given time. <button class="link-button" data="#rulesHide">Read more...</button></p>
        <div class="rules-details" id="rulesHide">
          <p><span class="bold large-text">HTML: </span>For HTML a pair would be <span class="bold">&lt;div&gt; + &lt;/div&gt;</span>.</p>
          <p><span class="bold large-text">CSS: </span>For CSS an example could be the property <span class="bold">display</span>. It has values: <span class="bold">block, inline, inline-block </span>etc. A pair would be <span class="bold">display + block.</span></p>
          <p>The main challange is to find the pairs fast. The harder the level the shorter will be the time given.</p>
        </div>
        <button class="button btn-start" ng-click="rulesView.showLevels()">Start</button>
      </div>

    <div ng-controller="levelsCtrl as levelsView" ng-show="levelsView.gameMetrics.levelsActive" class="levels">
      <h2>Select Level:</h2>
        <button class="button btn-easy" ng-click="levelsView.showCards()">Easy</button>
        <button class="button btn-medium">Medium</button>
        <button class="button btn-hard">Hard</button>
    </div>
    <div ng-controller="cardsCtrl as cardsView" ng-show="cardsView.gameMetrics.cardsActive" class="game-field">
      <h2>Find the tag pairs on time.</h2>
        <span class="fa fa-clock-o fa-lg"></span>
        <span class="game-timer">{{ cardsView.timeLeft }}</span>
        <span class="game-timer-msg">{{ cardsView.timesUp }}</span>
      <div class="flex-container">
        <div class="flex-item"
             ng-repeat="cardsData in cardsView.data">
          {{ cardsData.text }}
        </div>
        </div>
    </div>
</div>
  </main>

有数据的工厂:

(function(){
  angular
    .module("syntaxPairing")
    .factory("gameMetrics", GameMetrics);

    GameMetrics.$inject = ["DataService"];

    function GameMetrics(DataService){
      var gameObject = {
            rulesActive: true,
            levelsActive: false,
            cardsActive: false,
            changeVisibility: changeVisibility
      };

      return gameObject;

      function changeVisibility(metric, state){
        if(metric === "rulesView"){
          gameObject.rulesActive = state;
        }else if(metric === "levelsView"){
          gameObject.levelsActive = state;
        }else if(metric === "cardsView"){
          gameObject.cardsActive = state;
        }
          return false;
        }

    }
})();

第一个控制器（rulesView.js）：

(function(){
  angular
    .module("syntaxPairing")
    .controller("rulesCtrl", RulesController);

    RulesController.$inject = ["gameMetrics", "DataService"];

    function RulesController(gameMetrics){

      var vm = this;

      vm.gameMetrics = gameMetrics;
      vm.showLevels = showLevels;

      function showLevels(){
        gameMetrics.changeVisibility("rulesView", false);
        gameMetrics.changeVisibility("levelsView", true);
      }
    }

})();

第二个控制器(levelsView.js):

(function(){
  angular
    .module("syntaxPairing")
    .controller("levelsCtrl", LevelsController);

    LevelsController.$inject = ["gameMetrics", "DataService"];

    function LevelsController(gameMetrics){

      var vm = this;

      vm.gameMetrics = gameMetrics;
      vm.showCards = showCards;

      function showCards(){
        gameMetrics.changeVisibility("levelsView", false);
        gameMetrics.changeVisibility("rulesView", false);
        gameMetrics.changeVisibility("cardsView", true);
      }

    }

})();

第三控制器(cardsView.js):

(function(){
  angular
    .module("syntaxPairing")
    .controller("cardsCtrl", CardsController);

    CardsController.$inject = ["gameMetrics", "DataService", "$timeout"];

    function CardsController(gameMetrics, DataService, $timeout){
      var vm = this;

      vm.data = DataService.cardsData;
      vm.timeLeft = 5;
      vm.onTimeout = onTimeout;


      function onTimeout(){
        vm.timeLeft--;
        if(vm.timeLeft > 0){
         mytimeout = $timeout(onTimeout, 1000);
        }else{
          vm.timesUp = "The time is up!";
        }
      }
      var mytimeout = $timeout(onTimeout, 1000);

    }

})();

数据服务：

(function(){
  angular
    .module("syntaxPairing")
    .factory("DataService", DataFactory);

    function DataFactory(){
      var dataObject = {
        cardsData: cardsData
      };
      return dataObject;
    }

    var cardsData = [
      {
        type: "text",
        text: "<html>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "</html>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "<header>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "</header>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "<body>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "</body>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "<p>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "</p>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "<script>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "</script>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "<span>",
        selected: null,
        correct: null
      },
      {
        type: "text",
        text: "</span>",
        selected: null,
        correct: null
      }
    ]

})();

Answer 1

在第三个控制器中，即 cardsCtrl，您缺少 gameMetrics。所以cardsView.gameMetrics.cardsActive没有改变。

只需添加以下行，它就完美无缺。

vm.gameMetrics = gameMetrics;

http://jsbin.com/zeredah/edit?html,js,output

使用 ng-show 的相同函数可以在 Angular JS 中加载一个控制器，但不能加载另一个控制器

Identical function using ng-show works to load one controller in Angular JS, but not the another one

javascript

controller

function

angularjs

ng-show