Question

我在这里尝试将产品列表中的产品添加到购物车。产品列表位于ProductCrtl中。使用CartCrtl我试图获得产品价值。

如何修复上述错误？

我的代码 -

<!doctype html>
<html lang="en" ng-app="MyApp4">
<head>
  <meta charset="utf-8">
  <title>Controllers</title>
  <script src="angular.js"></script>
    <script src="app4.js"></script>
  </head>
<body  ng-controller="MyApp4Crtl">
    <table  ng-controller="ProductCtrl">
        <h1>Products</h1>
        <thead>
            <tr>
                <th>#</th>
                <th>Product Name</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="product in products">
                <td>{{$index+1}}</td>
                <td>{{product.name}}</td>
                <td>{{product.price | currency}}</td>
                <td><button ng-click=addToCart(product)>Add to Cart</button></td>
            </tr>
        </tbody>
    </table>

    <div ng-controller="CartCrtl">
        <h1>Cart</h1>
    Adding products!
    </div>
</body>
</html>

app4.js

name="MyApp4";
requires=[];
app4=angular.module(name,requires);

app4.controller("MyApp4Crtl",function($scope){
$scope.name1="Aluuu!";

});
app4.controller("ProductCtrl",function($scope,$rootScope){
$scope.products=[{name:"Computer",price:233},
                  {name:"Book",price:20},
                  {name:"Pen",price:2000},
                  {name:"Pencil",price:10},
                  {name:"box",price:11},
                  {name:"Laptop",price:10000},
                  {name:"CD",price:34},
                  {name:"DVD",price:3}
  ];
  $scope.addToCart=function(item){
    $rootScope.$broadcast("addProductEvent",item);
  }
});

app4.controller("CartCtrl",function($scope){
$scope.cartItems=[];

$scope.$on("addProductEvent",addingCartFunction);
function addingCartFunction(evt,product){
  $scope.cartItems.push(product);
}

});

Cartctrl未定义。我还在html标签中包含了ng-app。

Answer 1

这是你的一个工作示例

name="MyApp4";
requires=[];
app4=angular.module(name,requires);

app4.controller("MyApp4Crtl",function($scope){
   $scope.name1="Aluuu!";
});
app4.controller("ProductCtrl",function($scope,$rootScope){
$scope.products=[{name:"Computer",price:233},
                  {name:"Book",price:20},
                  {name:"Pen",price:2000},
                  {name:"Pencil",price:10},
                  {name:"box",price:11},
                  {name:"Laptop",price:10000},
                  {name:"CD",price:34},
                  {name:"DVD",price:3}
  ];
  $scope.addToCart=function(item){
   $rootScope.$broadcast("addProductEvent",item);
  }
});
app4.controller("CartCtrl",function($scope){
  $scope.cartItems=[];

   $scope.$on("addProductEvent",addingCartFunction);
   function addingCartFunction(evt,product){
     $scope.cartItems.push(product);
   }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div  ng-app="MyApp4"  ng-controller="MyApp4Crtl">
  <div ng-controller="ProductCtrl">
     <table >
        <h1>Products</h1>
        <thead>
            <tr>
                <th>#</th>
                <th>Product Name</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="product in products">
                <td>{{$index+1}}</td>
                <td>{{product.name}}</td>
                <td>{{product.price | currency}}</td>
                <td><button ng-click=addToCart(product)>Add to Cart</button></td>
            </tr>
        </tbody>
    </table>
  </div>
  <div ng-controller="CartCtrl">
     <h1>Cart</h1>
    Adding products!
    {{cartItems}}
  </div>
  </div>

Answer 2

我认为这是错误的类型

<div ng-controller="CartCrtl">

<div ng-controller="CartCtrl">

Answer 3

解决了！错误是错字。＆＃39; CartCrtl＆＃39;应该是CartCtrl＆＃39;。

错误：[ng：areq]参数＆＃39; CartCrtl＆＃39;不是一个功能，未定义

3 个答案: