正确使用带有 Angular.js 的控制器答案

【问题标题】：Proper use of Controllers with Angular.js正确使用带有 Angular.js 的控制器
【发布时间】：2023-03-19 22:57:02
【问题描述】：

学习 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 标签的值总是：

“你好，{{name}}”（这是浏览器中逐个字符显示的内容）

谁能解释一下为什么以及如何使用控制器方法更改“H1”标签的值？

【问题讨论】：

你还没有添加你的JS和HTML代码@Web-dev
对不起。不得不重新格式化代码
你必须在你的控制器中定义你的：var myApp = angular.module('myApp', []);，然后<html ng-app="myApp">我以myApp为例......你还必须注册你的控制器：myApp.controller('AppCtrl', AppCtrl);
我不明白你所指的变量声明。你能解释一下这是什么意思吗？另外，如果我有多个控制器，我是否必须在每个控制器方法中都有该声明？
...下次使用控制台中的错误帮助您寻找解决方案

标签： html angularjs

【解决方案1】：

看看这个例子，你需要在 html 标签中声明 ng-app="myApp" 以及修改控制器声明。下面的代码解决了你的问题，你可以运行代码sn-p。

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>

【讨论】：

如果我想在单个控制器中定义多个方法，我将如何定义它？根据我在您的回答中看到的，您将函数定义放在函数参数中，所以如果我必须在函数参数中包含多个函数定义，我会有点困惑
这是写控制器的方法。您不能创建同名的多个控制器。
这个函数其实就是控制器AppCtrl。
@web-dev 如果您需要控制器内的多个方法，您可以轻松地在控制器内创建 $scope 函数。看看这个：stackoverflow.com/questions/33662034/…

【解决方案2】：

根据您的评论。 “你好，{{name}}”（这是浏览器中逐个字符显示的内容）

发生这种情况的原因如下。

Angular js 未正确加载。
1. 您的某些文件存在 java 脚本错误。

根据您的代码，您的代码似乎没有错误。因此，您从 cdn 引用的角度 js 文件可能未正确加载。因此，手动下载该文件并尝试在本地指向该文件。

它可能会解决您的问题。您可以使用 chrome 开发人员工具轻松识别问题。

【讨论】：