angularjs切換的下一個視圖

第一關按鈕顯示列表項我想說我是相當新的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>

來源

2016-01-11 AivoK

改變你的服務，這樣的：

this.data = {}; 
// Other methods or objects can go here?  

return this;

Here是一個工作的重擊者。

來源

2016-01-12 07:16:56

angularjs切換的下一個視圖

回答

相關問題