Question

我有一个带有codeigniter（PHP框架）的angularjs应用程序，我有3个模块，每个客户端的每个模块。所以我为汽车细节创建了cars.js，为手机细节创建了手机.js，为家庭细节创建了home.js。这3个js彼此不同。

我只想比较所选项目的总估算价格。我尝试使用angularjs $ cookies但不适合我。在这里，我的代码如下。

为了使其易于理解，我将为每个应用程序添加一个简单的基本控制器以及一些行数据。每个JSON数组都有价格，我添加了一个复选框来添加估算，每当用户点击它时，它应该被添加到估计列表中，总量应该相应地改变。所以这是我展示的基本示例，只是为了理解如何组合angularjs应用程序以及如何保留添加的项目。

这是我的js代码

home.js
var app1 = angular.module("HomeApp",['uiSlider','ui.bootstrap']);
app1.controller('HomeCtrl', function( $scope,$http,$q,$location,$window,$routeParams,$modal, $log, $timeout) {
$scope.homerating=[{"home_info_id":"94","avg":"3","price":"4900"},
                   {"home_info_id":"119","avg":"4","price":"200"},
                   {"home_info_id":"95","avg":"4.5","price":"500"}];
});

cellphone.js1
var app2 = angular.module("CellphoneApp",['uiSlider','ui.bootstrap']);
app2.controller('CellphoneCtrl', function( $scope,$http,$q,$location,$window,$routeParams,$modal, $log, $timeout) {
$scope.cellphonerating=[{"cellphone_info_id":"94","avg":"3.333","price":"4900"},
{"cellphone_info_id":"119","avg":"4","price":"4500"},
{"cellphone_info_id":"95","avg":"4.5","price":"5060"}];
});

car.js
var app3 = angular.module("carApp",['uiSlider','ui.bootstrap']);
app2.controller('carCtrl', function( $scope,$http,$q,$location,$window,$routeParams,$modal, $log, $timeout) {
$scope.carrating=[{"car_info_id":"94","avg":"3.333","price":"8900"},
{"car_info_id":"119","avg":"4","price":"900"},
{"car_info_id":"95","avg":"4.5","price":"2160"}];
});

为此我有不同的看法，这里的问题从我开始

home.html
<div ng-app="HomeApp">
    <div class="panel panel-default col-md-2 pull-left" ng-repeat="h in homerating">
        <div class="panel-body" >
            <h2>{{h.price}}</h2>
             <input  class="check_count" type="checkbox" ng-checked="IsChecked"  ng-model="home.selected"   /> Add to Estimate<br>
        </div>
    </div>    
</div>
</div>
cellphone.html
<div ng-app="CellphoneApp">
    <div class="panel panel-default col-md-2 pull-left" ng-repeat="c in cellphonerating">
        <div class="panel-body" >
            <h2>{{c.price}}</h2>
             <input  class="check_count" type="checkbox" ng-checked="IsChecked"  ng-model="cellphone.selected"   /> Add to Estimate<br>
        </div>
    </div>    
</div>
</div>
car.html
<div ng-app="carrating">
    <div class="panel panel-default col-md-2 pull-left" ng-repeat="c in carrating">
        <div class="panel-body" >
            <h2>{{c.price}}</h2>
             <input  class="check_count" type="checkbox" ng-checked="IsChecked"  ng-model="car.selected"   /> Add to Estimate<br>
        </div>
    </div>    
</div>
</div>

我想要的是每当用户点击添加以估算点击项目的价格应该被添加到总数组中，并且从car.html到mobile.html或home.html时应该保留所选项目。我的主要问题是

1：我没有得到如何编写组合功能来推送所选项目以及在哪个控制器中？

2：第二个是即使我从家庭控制器添加每当我移动到car.html页面得到刷新，因为这些是不同的模块，所以如何使用cookie和会话？

Answer 1

使用工厂在多个控制器之间保留和共享数据
使用routes与单个页面。 Angular是一个SPA（单页面应用程序）框架，home.html cellphone.html car.html应该是同一模块中的路由模板，而不是独立的应用程序。

虽然可以将子模块作为依赖项附加在主模块中，但为了简单起见，请尝试将所有角度模块组合到一个模块中：

<强> main.js

// app module
var app = angular.module("MainApp",['uiSlider','ui.bootstrap', 'ngRoute']);

// routes
app.config(function($routeProvider) {
  $routeProvider.when('/home', {
    templateUrl: 'home.html',
    controller: 'HomeCtrl'
  })
  .when('/cellphone', {
    templateUrl: 'cellphone.html',
    controller: 'CellphoneCtrl'
  })
  .when('/car', {
    templateUrl: 'car.html',
    controller: 'carCtrl'
  })
  .otherwise({redirectTo: '/home'});
});

// home controller
app.controller('HomeCtrl', function( $scope,$http,$q,$location,$window,$routeParams,$modal, $log, $timeout) {
$scope.homerating=[{"home_info_id":"94","avg":"3","price":"4900"},
                   {"home_info_id":"119","avg":"4","price":"200"},
                   {"home_info_id":"95","avg":"4.5","price":"500"}];
});

// cell phone controller
app.controller('CellphoneCtrl', function( $scope,$http,$q,$location,$window,$routeParams,$modal, $log, $timeout) {
$scope.cellphonerating=[{"cellphone_info_id":"94","avg":"3.333","price":"4900"},
{"cellphone_info_id":"119","avg":"4","price":"4500"},
{"cellphone_info_id":"95","avg":"4.5","price":"5060"}];
});

// car controller
app.controller('carCtrl', function( $scope,$http,$q,$location,$window,$routeParams,$modal, $log, $timeout) {
$scope.carrating=[{"car_info_id":"94","avg":"3.333","price":"8900"},
{"car_info_id":"119","avg":"4","price":"900"},
{"car_info_id":"95","avg":"4.5","price":"2160"}];
});

<强>的index.html

<html ng-app="MainApp">
  <head>...</head>
  <body>

    <!-- this is where the views (home/cell/car.html) will populate -->
    <div ng-view></div>

  </body>
</html>

<强>更新

根据您的评论，可以查看angular locker。它使用本地/会话存储与cookie，但这可能是一个加分。我认为条目是按模块名称命名的，因此您可能需要一些额外的配置或模块重命名，但它应该允许您的数据在整个页面更改后存活

如何组合angularjs模块？

1 个答案: