我是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
的内容。
'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(']]');
});
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>
为什么它无法识别变量?我做错了什么?
控制台中没有错误。
答案 0 :(得分:3)
在HTML元素的引导中,ng-app属性应如下所示:
ng-app="newApp"
这样,angular就会知道使用你在app.js中定义的模块。我只是尝试了你的代码,并且interpolateProvider改变了工作。
答案 1 :(得分:1)
添加ng-app =“newApp”,尝试将角度脚本标记移动到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>
请参阅以下小提琴: