当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《AngularJS花括号没有解析,但ng-bind有效》经验,为你挑选了1个好方法。

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

控制器代码如下:

(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,而后者是有效的.我的输出如下:

链接到输出图像

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

谢谢.



1> 小智..:

如果这是一个由Django首先呈现的模板,那么Django Template引擎将替换所有{{ something }}可以解析它的内容.

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

为了解决这个问题,AngularJS允许您通过一个改变模板标记的字符interpolationProvider.这是文档链接.我经常使用[[ ]].

以下是上述链接中的示例以及如何将其集成到您的应用中:

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.";
});

推荐阅读
喜生-Da
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有