1

我是新手，angularjs事实上这是我第一次在我angularjs的一个应用程序中使用。该应用程序是使用 django 开发的。但是我目前正在尝试的与 django 无关（我猜），我有一个非常简单的模板，如下所示：

<html xmlns:ng="http://angularjs.org" lang="en" ng-app"><head>
    <title>Testing Angular</title>
    <link rel="stylesheet" type="text/css" href="/static/css/application.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" »="" type="text/javascript">
    </script>
    <script type="text/javascript" src="/static/js/messages.js"></script>
    <script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
    <script src="/static/js/marketing/app.js"></script>
    <script src="/static/js/marketing/controllers.js"></script>

</head>
<body>
    <div id="content" ng-controller="UserListControl" class="ng-scope">
        [[ users.length ]]
    </div>
</body>
</html>

以下分别是 和 的app.js内容controllers.js。

应用程序.js

'use strict';

var newApp = angular.module('newApp', []) 
    .config(function($interpolateProvider){
        // To prevent the conflict of `{{` and `}}` symbols
        // between django templating and angular templating we need
        // to use different symbols for angular.
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    });

控制器.js

function UserListControl($scope) {
    $scope.users = [   
        {   
            'name' : 'John Doe',
            'type' : 'Platinum',
        },  
        {   
            'name' : 'Matt Hill',
            'type' : 'Gold',
        }   
    ];  
}

但是模板只是渲染[[ users.length ]]而不是实际渲染长度。

我还尝试了ngRepeat如下指令：

<p ng-repeat="user in users">
    <p>[[user.name]], ([[user.type]])</p>
<p>

和

<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>[[ i ]]</td></tr>

第一个ng-repeat指令呈现：

<!-- ngRepeat: usr in users -->
<p ng-repeat="usr in users" class="ng-scope">
        </p>
<p ng-repeat="usr in users" class="ng-scope">
        </p>
<p><a href="#"></a>()</p>
<p></p>

第二个呈现：

<!-- ngRepeat: i in [0, 1, 2, 3, 4, 5, 6, 7] -->
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>

为什么它无法识别变量？我究竟做错了什么 ？

PS：

控制台中没有错误。

  • 角度版本：1.0.0
  • Django 版本：1.4
  • 网络浏览器：谷歌浏览器 24.0.1312.68
  • 操作系统：Ubuntu 12.04
4

2 回答 2

3

在 HTML 元素的引导中，ng-app 属性应如下所示：

ng-app="newApp"

这样 Angular 就会知道使用您在 app.js 中定义的模块。我刚刚用你的代码试了一下， interpolateProvider 的变化工作得很好。

于 2013-02-12T06:32:55.757 回答
1

添加一个 ng-app="newApp"，尝试将 Angular 脚本标签移动到 html 正文的底部，并在第一个用户转发器中修复关闭的 p 标签。

<div ng-app="newApp">
<div id="content" ng-controller="UserListControl" class="ng-scope">
        [[ users.length ]]

        <p ng-repeat="user in users">[[user.name]], ([[user.type]])</p>
</div>
<script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>

请参阅以下小提琴：

http://jsfiddle.net/jwanga/VLRVU/

于 2013-02-12T06:39:48.080 回答