错误：[$interpolate:interr] 无法插值：- Angular

Question

我试过了

Angular JS - “Error: [$interpolate:interr] Can't interpolate:”?

Angular JS - "Error: [$interpolate:interr] Can't interpolate:" when using Highcharts

AngularJS can't interpolate error

Angular JS - “Error: [$interpolate:interr] Can't interpolate:” from a working function

在开始之前，我知道 getTotoal() 函数的 $scope.item 声明存在一些问题。下面是我的JS代码：

var mainAngular = angular.module('bazaar', ['ngRoute']);
mainAngular.controller('CartController', function($scope, $http) {
var cJson = "./json/cart.json";
$http.get(cJson).success(function(response) {
    $scope.items = response;
});

$scope.getTotal = function(){
var total = 0;
var num = $scope.items.length;
for(var i = 0; i < num; i++){
    var product = $scope.items[i];
    total += (product.unitPrice * product.quantity);
}
return total;
};
});

当我尝试调用 getTotal 函数时，虽然函数的返回值工作正常，但我遇到了以下错误：

Error: [$interpolate:interr] Can't interpolate:  Cart (Rs {{ getTotal() }}) 
TypeError: Cannot read property 'length' of undefined
http://errors.angularjs.org/1.2.15/$interpolate/interr?p0=%20Cart%20(Rs%20%…%20&p1=TypeError%3A%20Cannot%20read%20property%20'length'%20of%20undefined
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:78:12
at Object.$get.fn     (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:8421:26)
at Object.scopePrototype.$watch.arguments.(anonymous function) (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1876:35)
at Scope.$get.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:12023:40)
at Scope.scopePrototype.$digest (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1924:23)
at Scope.$get.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:12279:24)
at Scope.scopePrototype.$apply (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1987:22)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:1382:15
at Object.invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:3805:17)
at doBootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:1380:14)

HTML 代码：

<div class="dropdown  cartMenu " ng-controller="CartController">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-shopping-cart"> </i> 
                            <span class="cartRespons"> Cart (Rs {{ getTotal() }}) </span> 
                            <b class="caret"> </b> 
                        </a>
                        <div class="dropdown-menu col-lg-4 col-xs-12 col-md-4 ">
                            <div class="w100 miniCartTable scroll-pane" >
                                <table>
                                    <tbody>
                                        <tr class="miniCartProduct" ng-repeat="item in items">
                                            <td style="width:20%" class="miniCartProductThumb">
                                                <div> <a href="{{ item.prodLink}}">
                                                        <img src="{{ item.prodImage}}" alt="img"> </a> 
                                                </div>
                                            </td>
                                            <td style="width:40%"><div class="miniCartDescription">
                                                    <h4> <a href="{{ item.prodLink}} }}"> {{ item.productName}} </a> </h4>
                                                    <span class="size"> {{ item.size}} </span>
                                                    <div class="price"> <span>Rs {{item.unitPrice}} </span> </div>
                                                </div></td>
                                            <td style="width:10%" class="miniCartQuantity"><a> X {{item.quantity}} </a></td>
                                            <td style="width:15%" class="miniCartSubtotal"><span> {{item.unitPrice * item.quantity}} </span></td>
                                            <td style="width:5%" class="delete"><a> x </a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="miniCartFooter text-right">
                                <h3 class="text-right subtotal"> Subtotal: Rs {{ getTotal() }} </h3>
                                <a class="btn btn-sm btn-danger"> <i class="fa fa-shopping-cart"> </i> VIEW CART </a> <a class="btn btn-sm btn-primary"> CHECKOUT </a> </div>

                        </div>
                    </div>

JSON 文件：

[
{
    "prodImage":"images/product/3.jpg",
    "prodLink":"product-details.html",
    "productName":"Adidas T shirt",
    "size":"XL",
    "unitPrice":"2000",
    "quantity":"1"
},{

    "prodImage":"images/product/2.jpg",
    "prodLink":"product-details.html",
    "productName":"Adidas T shirt",
    "size":"L",
    "unitPrice":"2000",
    "quantity":"1"
},{
    "prodImage":"images/product/10.jpg",
    "prodLink":"product-details.html",
    "productName":"Adidas T shirt",
    "size":"S",
    "unitPrice":"200",
    "quantity":"5"
},{
    "prodImage":"images/product/4.jpg",
    "prodLink":"product-details.html",
    "productName":"Jeans",
    "size":"32/34",
    "unitPrice":"2000",
    "quantity":"2"
},{
    "prodImage":"images/product/5.jpg",
    "prodLink":"product-details.html",
    "productName":"NIKE T shirt",
    "size":"XL",
    "unitPrice":"2000",
    "quantity":"2"
},{
    "prodImage":"images/product/7.jpg",
    "prodLink":"product-details.html",
    "productName":"Reebok T shirt",
    "size":"XL",
    "unitPrice":"2000",
    "quantity":"2"
}
]

Answer 1

在你的模块定义中使用 ng-sanitize ，也可以将项目初始化为 [] 变量，你可以在成功函数或返回 promise 时推送它。

 var mainAngular = angular.module('bazaar', ['ngRoute','ngSanitize']);


$scope.items= [];
  var cJson = "./json/cart.json";
  $http.get(cJson)
    .success(function(response) {
      $scope.items.push(response)
   });

  <span ng-bind-html="getTotal"></span>