Question

我正在开发一个Django应用程序，我正在使用AngularJS作为我的前端。我有一个简单的代码

<div class="vert-carousel" ng-controller="PrizeController">
    <div class="gallery-cell" ng-repeat="p in getPrizes()">
        <div class="car-item">
            <img ng-src="{{ p.thumbnail }}" alt="Can't load the image">
            <p><div  ng-bind="p.thumbnail"> </p>
        </div>
    </div>
</div>

控制器代码如下：

(function () {
'use strict';

angular
    .module('mainApp')
    .controller('PrizeController', PrizeController);

PrizeController.$inject = ['$scope', 'CompetitionService', 'PrizeService'];

function PrizeController($scope, CompetitionService, PrizeService) {
    $scope.competition = CompetitionService.getCompetition();
    $scope.prizes = [];
    $scope.showPrice = true;
    $scope.detailLink = "/#!/prize/";

    $scope.getPrizes = function () {
       console.log ("GetPrizes");
        console.log($scope.prizes);
        return $scope.prizes; //PrizeService.getCurrentWeekList();
    };

    function init() {
        PrizeService.getCurrentWeekList().then(function(data) {
            console.log ("Init called");
            console.log(data);
            $scope.prizes = data;
        })
    }

    init();
}
})();

正在发生的事情是，在前端，img ng-src标记中的{{p.thumbnail}}没有解析。事实上，如果我在代码中的任何地方使用花括号，我无法解决它。但是，使用ng-bind显示相同的值。在我的代码中，我试图用{{}}和ng-bind来解析p.thumbnail，而后者是有效的。我的输出如下：

Link to the output image

请帮助我理解{{}}无效的原因。

感谢。

Answer 1

如果这是Django首先呈现的模板，那么Django模板引擎会将所有{{ something }}替换为可以解析的所有interpolationProvider。

这意味着当代码到达浏览器并且AngularJS加载它时，代码中没有任何花括号可以解决，只是（可能）空白。

为了解决这个问题，AngularJS允许您通过[[ ]]更改模板标记的字符。这是docs link。我通常使用var customInterpolationApp = angular.module('customInterpolationApp', []); customInterpolationApp.config(function($interpolateProvider) { $interpolateProvider.startSymbol('//'); $interpolateProvider.endSymbol('//'); }); customInterpolationApp.controller('DemoController', function() { this.label = "This binding is brought you by // interpolation symbols."; });。

以上链接中的示例以及如何将其集成到您的应用中：

startActivity()

AngularJS花括号没有解析，但ng-bind有效

1 个答案: