Question

我正在设置一个非常基本的AngularJS + Ionic应用程序，并遇到一个奇怪的情况，尽管ng-repeat正常工作（例如重复正确的次数），但变量未在DOM上呈现。此外，我看到这种奇怪的行为只发生在我的本地应用程序中，但在Plunker上的精确副本上正常工作。

在app.js我有：

angular.module('sleepExpertChatApp', [
  'ionic',
])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('peoplelist', {
    url: '/peoplelist',
    templateUrl: 'templates/people-list.html',
    controller: 'PeopleListCtrl'
  });

  $urlRouterProvider.otherwise('/peoplelist');
})

.controller('PeopleListCtrl', function($scope){
    $scope.obj = {}
    $scope.test = "Mytestvar"
    $scope.obj.people = [{name:"leon"},{name:"jeff"},{name:"leon"}];
    console.log($scope.obj);
});

我的HTML：

<!DOCTYPE html>
<html ng-app="sleepExpertChatApp">
  <head>
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.1.1/angularfire.min.js"></script>
    <script src="/static/chat/main.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0/css/ionic.min.css">
  </head>
  <body>
    <ion-nav-view></ion-nav-view>
    <script id="templates/people-list.html" type="text/ng-template">
        <ion-view id="userMessagesView"
          view-title="People">
          afsdf
          <ion-content>
                <div ng-repeat="person in obj.people">
                    <div class="item">
                        {{person.name}}
                    </div>
                </div>
        </ion-content>
        </ion-view>
    </script>
  </body>
</html>

这是Plunker：http://plnkr.co/edit/UV3AJoEFpUeE45DkVv9A

在本地，简单的ng-repeat确实产生了正确数量的元素，但在尝试评估表达式以显示变量时，没有显示任何内容。请参阅下面的屏幕截图，注意有3个div与类item正如预期的那样，但它们没有名称。

任何想法在这个看似微不足道的设置中会出现什么问题？

DOM of my problem

Answer 1

啊！我没有意识到我是从Django服务器提供HTML，因此Django的模板渲染引擎与AngularJS的冲突。

使用Django＆＃39; {% verbatim %}标记简单地包装我的HTML可以解决我的问题。

变量不在DOM中显示，但ng-repeat有效

1 个答案: