Question

我不知道如何在两个控制器之间共享数组。一控制器用于填充数组，另一个用于显示数据，允许用户从阵列中删除项目。

我的结构档案是：

templates/cart.html 

templates/shop.html 

app.js

index.html

我尝试了路线服务。

我希望能够将用户输入推送到 “ shopController”并使用第二个在模板中显示该信息控制器称为“ cartController”，并允许用户删除以下项希望的。

app.js

//reference routing in order to route and render templates
var myApp=angular.module("myApp", []); 

//create the the routing for the app
myApp.config(['$routeProvider',
    function($routeProvider){

        $routeProvider.
            when('/shop', {
                templateUrl: 'templates/shop.html',
                controller: 'shopController',
                //items: array
            }).
            when('/cart', {
                templateUrl: 'templates/cart.html',
                controller: 'cartController',
                //items: array
            }).
            otherwise({
                redirectTo: '/shop'
            });

    }]);
//factory that holds data that can be shared between controllers
myApp.service('CartContents', function(){
    //var that should hold all user input
    var privateCart = [];

    var additem = function(newitem){
        privateCart.push(newitem);
    };

    var viewCart = function(){
        return privateCart;
    };

    return {
        additem: additem,
        viewCart: viewCart
    };
});


myApp.controller('cartController', function($scope, CartContents){
    $scope.message = "Cart Page";
    /*call the factory function viewCart in order to view all contents of the array*/
    $scope.items = CartContents.viewCart();
    
});

//contrller functions that manage what each page/template does
myApp.controller('shopController', function($scope, CartContents){
    $scope.message = "Shopping Page";
    $scope.items = CartContents.viewCart();
    /*call the factory function additem in order to push currItem into an array*/
    $scope.selectOrder = function(currItem){
        CartContents.additem(currItem);
        $scope.items = CartContents.viewCart();
    };
});

<!DOCTYPE html>
<html lang ="en">
    <head>
        <title>Simple Web App</title>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

        <style>
                body {
                  padding-top: 10px;
                  background-color: #F5F5F5;
                }
        </style>
    </head>

    <body ng-app="myApp">                                          <!--Angulars way of declaring a root element of the app-->
        <div class="container">
            <div class="row">
                <div class="col-1">
                    <ul class="nav">
                        <li><a href="#shop">Shop</a></li>   <!--Refrence the .html files that will be separate pages-->
                        <li><a href="#cart">View Order</a></li>
                    </ul>
                </div>
                <div class="col-2">
                    <div ng-view></div>                          <!--.html templates will be rendered here-->
                </div>
            </div>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="app.js"></script>
    </body>
</html>

cart.html

<h1> Cart Page </h1>
{{message}}

<div ng-model = "cartContents">
    <ul>
        <!--angular loops and displays every string in an array-->
        <li ng-repeat="item in items"> {{item}} </li>
    </ul>
</div>

shop.html

<h1> Shopping Page </h1>
{{message}}

<div class = "selectItem">
    <input type="text" ng-model="currItem" placeholder = "Select Item">
    <!--basically cal the function selectorder() in my app.js file to add an item-->
    <button ng-click="selectOrder(currItem)">Select</button>
    <ul>
        <!--angular loops and displays every string in an array-->
        <li ng-repeat="item in items"> {{item}} </li>
    </ul>
</div>

Answer 1

您应该创建一个服务，以将信息从一个控制器传递到另一个控制器。

myApp.service('exampleService', function() {
    this.cartContents = [];

    this.addContents = function(newObj) {
      cartContents.push(newObj);
    };

    this.getContents = function(){
        return cartContents;
    };
}

然后，您将希望将服务注入到每个控制器中。在一个控制器中，您将通过该服务添加到阵列。在另一种情况下，您将从服务中获取阵列。

myApp.controller('cartController', function($scope, exampleService, /*$route*/CartContents){
    $scope.message = "Cart Page";
    var items = exampleService.getContents();
    $scope.checkout = CartContents.viewCart();

});
myApp.controller('shopController', function($scope, exampleService, /*$route*/CartContents){
    $scope.message = "Shopping Page";
    //var items = $route.current.items;
    $scope.selectOrder = function(currItem){
        CartContents.additem(currItem);
    };
    exampleService.addContents(CartContents);
});

让我知道您是否有任何疑问！

Answer 2

购物页面缺少参数：

<h1> Shoping Page </h1>
{{message}}

<div class = "selectItem">
    <input type="text" ng-model="currItem" placeholder = "Select Item">
    ̶<̶b̶u̶t̶t̶o̶n̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶e̶l̶e̶c̶t̶O̶r̶d̶e̶r̶(̶)̶"̶>̶S̶e̶l̶e̶c̶t̶<̶/̶b̶u̶t̶t̶o̶n̶>̶
    <button ng-click="selectOrder(currItem)">Select</button>
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>
</div>

其控制器还需要从服务中获取items：

myApp.controller('shopController', function($scope, /*$route*/CartContents){
    $scope.message = "Shopping Page";
    ̶/̶/̶v̶a̶r̶ ̶i̶t̶e̶m̶s̶ ̶=̶ ̶$̶r̶o̶u̶t̶e̶.̶c̶u̶r̶r̶e̶n̶t̶.̶i̶t̶e̶m̶s̶;̶
    $scope.items = CartContents.viewCart();

    $scope.selectOrder = function(currItem){
        CartContents.additem(currItem);
        $scope.items = CartContents.viewCart();
    };
});

如何从我的cartController中的shopController中访问数组以显示所有项目（并根据需要删除）？

app.js

cart.html

shop.html

2 个答案: