Question

附加到页脚元素的ng-if表达式＆＃34; clicked＆＃34;当应用程序首次启动时，我希望它会被角度评估为false。

当按钮＆＃34; class = menuLeft＆＃34;点击，它点击即可更改＆＃34;点击＆＃34;如headerCtrl menuToggle（）中所述，为true，以便通过单击按钮，用户可以将页脚从显示切换到隐藏，反之亦然。
代码没有做到预期，请帮忙。谢谢。

＆＃13;

//---headerCtrl.js--------------------------------
(function () {
    'use strict';
    angular
        .module('appModule')
        .controller('HeaderCtrl', ['$scope', HeaderCtrl]);

    function HeaderCtrl($scope) {
        $scope.menuToggle = menuToggle;
        function menuToggle() {
            $parents.clicked = true;
        }
    }
})();

＆＃13;

//---index.html-----------------------------
<!doctype html>
<html lang="en" ng-app="appModule">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <base href="http://localhost:63342/angOne/">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.5.0-rc.1/angular-animate.js"></script>

    <script src="app.js"></script>
    <script src="services/routing.js"></script>
    <script src="controllers/mainMenuCtrl.js"></script>
    <script src="controllers/headerCtrl.js"></script>
    <meta name="viewport" content="width=device-width" />
</head>

<body>
<header ng-controller="HeaderCtrl">
    <button class="menuLeft" type="button" ng-model="clicked" ng-click="menuToggle()">&#9776;</button>
    <label id="pageTitle" class="pageTitle">Select item from list</label>
    <button class="menuRight" type="button">&#8942;</button>
</header>

<main ng-view></main>

<footer ng-if="clicked">
    <ul class="horizontal-style">
        <li><button type="button">NO</button></li>
        <li><button type="button">EXTRA</button></li>
        <li><button type="button">YES</button></li>
    </ul>
</footer>

</body>
</html>

＆＃13;

Answer 1

Header和Footer具有不同的范围。

如果您希望他们进行沟通，可以通过常见的service：

angular
.module('appModule', [])
.factory('TogglerFactory', function($rootScope) {
  var TogglerFactory = {};

  TogglerFactory.menuToggle = function(){
    $rootScope.clicked = !$rootScope.clicked;
  }

  return TogglerFactory;
});

然后将该工厂注入Header和Footer控制器：

   .controller('Header/Footer Ctrl', ['$scope', 'TogglerFactory', HeaderCtrl]);
      function HeaderCtrl($scope, Toggler) {
        $scope.menuToggle = Toggler.menuToggle;
      }
   }]);

或者使用$rootScope：

(function() {
  'use strict';
  angular
    .module('appModule', [])
    .controller('HeaderCtrl', ['$scope', '$rootScope', HeaderCtrl]);

  function HeaderCtrl($scope, $rootScope) {
    $scope.menuToggle = function() {
      $rootScope.clicked = !$rootScope.clicked;
    }
  }
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>

<body ng-app="appModule">
  <header ng-controller="HeaderCtrl">
    <button class="menuLeft" type="button" ng-click="menuToggle()">&#9776;</button>
    <label id="pageTitle" class="pageTitle">Select item from list</label>
  </header>

  <main ng-view></main>

  <footer ng-if="clicked">
    <ul class="horizontal-style">
      <li>
        <button type="button">NO</button>
      </li>
      <li>
        <button type="button">EXTRA</button>
      </li>
      <li>
        <button type="button">YES</button>
      </li>
    </ul>
  </footer>

</body>

从兄弟范围访问ng-if表达式

1 个答案: