javascript - 初学者在 Angularjs 中遇到范围问题

Question

我正在前端使用 Angular，将 Django 作为后端，编写一些小东西来学习 Angular。我正在尝试显示我在范围中定义的变量。我正在加载 html 作为 anchor 标记的部分 onclick。这是我的 app.js，其中包含我的路由器设置:

var blogApp = angular.module('blogApp',['ngRoute'])

blogApp.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('{$');
    $interpolateProvider.endSymbol('$}');
});

blogApp.config(['$routeProvider',function($routeProvider){
    $routeProvider.
      when('/login', {
        templateUrl: 'static/partials/login.html',
      }).
      when('/register',{
        templateUrl:'static/partials/register.html',
      }).
      when('/shoppingcart', {
        templateUrl:'static/partials/shopping_cart.html',
        controller:'CartController'
      }).
      otherwise({
        redirectTo: '/'
      });
}]); 

这是我定义的 CartController:

blogApp.controller('CartController', function($scope){
    $scope.items = [
                    {title: 'Paint pots', quantity: 8, price: 3.95},
                    {title: 'Polka dots', quantity: 17, price: 12.95},
                    {title: 'Pebbles', quantity: 5, price: 6.95}
                ];

});

我已经包含了包含我的 CartController 的 js 和定义了我的路由的 js。我的部分(称为 shopping_cart.html)如下所示:

<div ng-controller='CartController'>
    <h3>Your Cart</h3>
    <div ng-repeat="item in items">
        <span>{% item.title %}</span>
        <input ng-model="item.quantity">
        <span> {% item.price|currency %} </span>
        <span> {% item.price * item.quantity | currency %} </span>
        <button ng-click="remove($index)">Remove</button>
    </div>
</div>

有趣的问题是 item.quantity 显示正确，但 item.title、item.price 等显示在我的输出中。要点是如果它显示 item.quantity 这意味着 item 变量包含定义的变量，即使我将 item.title 放在输入中代替 item.quantity ，它也会显示变量，但 {% item.title %} 本身永远不会显示。请指出我的错误，并请解释为什么会发生这种情况。

Answer 1

看起来像是一个错字。

在您的配置中，您将插值的开始和结束符号覆盖为“{$”和“$}”，但在模板中您使用“{%”和“%}”。将 % 替换为 $ 就可以了。