0
第一關按鈕顯示列表項我想說我是相當新的Angularjs但我學習它的基本功能相當不錯。angularjs切換的下一個視圖
我的角度應用程序的目標是在AngularJS UI-Router 2頁。我得到了我的應用程序的相當好的一部分,文檔是好的。我現在的目標是將數據/選擇/屬性從主頁傳遞到關於頁面。所以如果我在主頁上有一個選擇按鈕列表,它會顯示/隱藏關於頁面上的另一個列表。所以主頁上的選擇將會在主頁上被記住。
我已經閱讀工廠,服務和rootScope關於它的文檔,我仍然感到困惑。什麼以及如何將選擇布爾值傳遞到工廠,然後將該值/數據注入About頁面,然後隱藏/顯示項目?
我有一些已經建立的主頁上,但在輸入框的條款(這是一個很好的第一步,但不是即時尋找),其中顯示關於頁的數據。數據在當前的瀏覽器會話中被記住。
如何插入NG-切換,NG單擊或任何變量控制器範圍數據進廠?如何將該布爾值注入About頁面。
這是我目前的Plunker解決方案:demo
我plunker應用角碼
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
url: '/about',
templateUrl: 'partial-about.html'
});
});
routerApp.factory('MyService', function(){
return {
data: {
}
// Other methods or objects can go here?
};
});
routerApp.controller('FirstCtrl', function($scope, MyService){
$scope.data = MyService.data;
});
routerApp.controller('SecondCtrl', function($scope, MyService){
$scope.data = MyService.data;
});
<!DOCTYPE html>
<html ng-app="routerApp">
<head>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.navbar { border-radius:0; }
</style>
<!-- JS (load angular, ui-router, and our custom js file) -->
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-sanitize.js"></script>
<script src="app.js"></script>
</head>
<!-- apply our angular app to our site -->
<body>
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
<div ui-view></div>
</div>
</body>
</html>