angularjs切换按钮在下一个视图上显示列表项答案

【问题标题】：angularjs toggle button show list items on next viewangularjs切换按钮在下一个视图上显示列表项
【发布时间】：2016-04-15 22:09:24
【问题描述】：

首先我想说我对 Angularjs 还很陌生，但我正在很好地学习它的基础知识。

我的 Angular 应用程序的目标是在 AngularJS UI-Router 中有 2 个页面。我很好地完成了我的应用程序的那部分，文档也很好。我现在的目标是将数据/选择/属性从主页传递到关于页面。因此，如果我要在主页上有一个选择按钮列表，它将在关于页面上显示/隐藏另一个列表。所以主页上的选择会被记住在主页上。

我已阅读有关工厂、服务和 rootScope 的文档，但我仍然感到困惑。什么以及如何将选择的布尔值传递给工厂，然后将该值/数据注入关于页面，然后隐藏/显示项目？

我已经在主页上设置了一些东西，但就输入框而言（这是一个很好的第一步，但不是我要寻找的），它在关于页面上显示数据。在当前浏览器会话中记住数据。

如何将 ng-toggle、ng-click 或任何可变控制器范围数据插入工厂？如何将该布尔值注入“关于”页面。

这是我目前的 Plunker 解决方案：demo

我的 plunker 应用 Angular 代码

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>

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

将您的服务更改为：

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

return this;

Here 是一名工作人员。

【讨论】：