2016-03-07 101 views
1

我有一个Spring应用程序,我试图用AngularJS构建视图,但双曲线括号表示法不起作用,这意味着绑定也不起作用。这里是我的index.html:AngularJS不适用于Spring应用程序

<!DOCTYPE html> 
<html xmlns:th="http://www.thymeleaf.org"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.js"></script> 
<head lang="en"> 
<title>Test Page</title> 
<link rel="stylesheet" 
    href="./bower_components/bootstrap-css-only/css/bootstrap.min.css" /> 
</head> 

<body ng-app="testApp" ng-init="code='000'"> 
    <div class="outer"> 
    <p>Name: <input type="text" ng-model="name"/></p> 
    <p>You wrote: {{ name }}</p> 
    </div> 
</body> 
</html> 

当我尝试加载这个页面,我得到正确的文本字段,而{{名}}仍然这样,无论我做什么。

编辑:我忘记了角剧本,但我加了它,问题仍然存在

+0

你在你的html中没有角度js lib。 – Maksym

+0

我在我的文件中添加了 napstablook

回答

1

您正在使用NG-应用指令,但是你有没有宣布testApp模块。尝试声明testApp模块angular.module('testApp', [])

下面是您的示例。它为我工作。

<!DOCTYPE html> 
<html xmlns:th="http://www.thymeleaf.org"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.js"></script> 
<head lang="en"> 
<title>Test Page</title> 
<link rel="stylesheet" 
    href="./bower_components/bootstrap-css-only/css/bootstrap.min.css" /> 
</head> 
<script> 
    //create the testApp module 
    angular.module('testApp', []); 
</script> 
<body ng-app="testApp" ng-init="code='000'"> 
    <div class="outer"> 
    <p>Name: <input type="text" ng-model="name"/></p> 
    <p>You wrote: {{ name }}</p> 
    </div> 
</body> 
</html> 
+0

谢谢!是所有角度应用的必要条件吗?我不认为我在其他示例中看到了这一点 – napstablook

+0

在角度快速启动示例https://angularjs.org/#the-basics中,他们使用的是不带模块名称的ng-app。如果你遵循这种方法,你不需要声明一个模型。如果您打算编写超过10-20行的角码,我会强烈建议您制作一个模块并使用控制器来保持代码更易于管理。 – TwitchBronBron

相关问题