訪問來自同級作用域的ng-if表達式

連接到頁腳元素的ng-if具有表達式「clicked」，當應用第一次啓動時，我期望它通過角度被評估爲false。訪問來自同級作用域的ng-if表達式

當點擊按鈕「class = menuLeft」時，它是ng-click假設按照headerCtrl menuToggle（）中所述將「clicked」的值更改爲true，以便通過單擊該按鈕，用戶可以切換從顯示到隱藏，反之亦然。
該代碼沒有做什麼預計，請幫助。謝謝。

//---headerCtrl.js-------------------------------- 
 
(function() { 
 
    'use strict'; 
 
    angular 
 
     .module('appModule') 
 
     .controller('HeaderCtrl', ['$scope', HeaderCtrl]); 
 

 
    function HeaderCtrl($scope) { 
 
     $scope.menuToggle = menuToggle; 
 
     function menuToggle() { 
 
      $parents.clicked = true; 
 
     } 
 
    } 
 
})();

//---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>

來源

2016-01-25 Fred J.

您的控制器作用域限於'header'元素 - 「footer」不在範圍內。 – tymeJV

那麼解決它的最好方法是什麼？在body元素上創建另一個控制器或使用全局範圍以及如何？ –

的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>

來源

2016-01-25 22:24:54 Daniel

好，它是如何使用服務完成的？ :) Thx –

@FredJ。添加了關於如何使用服務完成的解釋。 – Daniel

訪問來自同級作用域的ng-if表達式

回答

相關問題