javascript - 使用 ng-show 的相同功能可以在 Angular JS 中加载一个 Controller ，但不能加载另一个 Controller

Question

我正在使用 Angular 创建一个页面，该页面具有三个 Controller 。它们是使用 ng-show 指令加载的。每个 Controller 都有一个带有ng-click的按钮，可以调用函数。该功能很简单，它隐藏一个 Controller 并使下一个可见。

问题:此功能适用于一个 Controller ，但由于某种原因，它不适用于另一个 Controller 。准确地说，levelsView Controller 已加载，但 cardsView 未加载。如果我在 HTML 页面中将 ng-show 设置为 true，但不是通过该函数，CardsView 就会变得可见。我花了几天时间试图找到问题所在，但找不到，请帮我解决这个“谜团”。

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

    }
})();

第一个 Controller (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);
      }
    }

})();

第二个 Controller (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);
      }

    }

})();

第三个 Controller (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

在第三个 Controller (即 cardsCtrl)中，您缺少 gameMetrics。所以cardsView.gameMetrics.cardsActive没有改变。

只需添加以下行即可完美运行。

vm.gameMetrics = gameMetrics; 

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