Angular.js中控制器的正确使用
Angular.js中控制器的正确使用
提问于 2015-11-24 05:02:58
学习angular.js，并拥有这段简单的代码，但不知道如何更改控制器中"name“变量的值。
HTML:
<!DOCTYPE html>
<html lang="en" ng-app ng-controller="AppCtrl">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="../js/controller.js"></script>
</head>
<body>
<h1>Hello, {{name}}</h1>
<input type="text" ng-model="name">
</body>
</html>Controller.js代码如下：
function AppCtrl($scope){
$scope.name = "World";
}在我添加控制器之前，<h1>标记会根据输入字段中键入的内容动态变化。但是，当添加控制器时，H1标记的值始终是：
“Hello，{{name}”(这是浏览器中按字符显示的内容)
有人能解释为什么以及如何使用控制器方法改变‘H1’标签的值吗？
回答 2
Stack Overflow用户
发布于 2015-11-24 05:19:55
看看这个例子，您需要在html标记中声明ng-app="myApp“，并修改控制器声明。下面的代码解决了您的问题，您可以运行代码片段。
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope',
function($scope) {
$scope.name = "World";
}
]);<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="AppCtrl">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<h1>Hello, {{name}}</h1>
<input type="text" ng-model="name">
</body>
</html>
Stack Overflow用户
发布于 2015-11-24 05:34:00
根据你的评论。“Hello，{{name}”(这是浏览器中按字符显示的内容)
发生这种情况的原因如下。
- 两个角度的js都没有正确加载。
- 您的一些文件上有一个java脚本错误。
根据您的代码，您的代码中似乎没有错误。因此，您从cdn中引用的角js文件可能没有正确加载。因此，请手动下载该文件，并尝试在本地指向该文件。
它可以解决你的问题。您可以使用工具轻松地识别问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33885813
复制相关文章
相似问题
腾讯云开发者
