Angular Basic ng-bind 和 ng-click 不起作用答案

【问题标题】：Angular Basic ng-bind and ng-click won't workAngular Basic ng-bind 和 ng-click 不起作用
【发布时间】：2015-05-05 10:37:57
【问题描述】：

我是一个有角度的初学者，它似乎没有回应我。我正在尝试通过简单的 ng-click 来添加和减去计数器。我得到了他的错误：

Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=FirstController&p1=not%20a%20function%2C%20got%20undefined...

这是 index.html：

controller.js：

var app = angular.module('app', []);
    app.controller('FirstController', function($scope) {
    	$scope.word = "ever";
    	$scope.counter = 0;
    	$scope.add = function(amount) { 
    		$scope.counter += amount; 
    	};
    	$scope.subtract = function(amount) {
    		$scope.counter -= amount; 
    	};
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app>

<head>
  <title>Simple App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>

<body>
  <div ng-controller="FirstController">
    <h4>The simplest adding machine ever</h4>
    <button ng-click="add(1)" class="button">Add</button>
    <a ng-click="subtract(1)" class="button alert">Subtract</a>
    <h4>Current count: {{ counter }}</h4>
  </div>
  <script type="text/javascript" src="js/controller.js"></script>
</body>

</html>

任何帮助将不胜感激。谢谢

【问题讨论】：

试试这个，把<html ng-app>改成<html ng-app="app">
ng-app 的位置有点不对。它应该在（在大多数情况下）ng-app="myApp" 和 ng-controller="myController" 的 body 标记中。在 google 中查看 Angular 的教程，并尝试逐步复制每一行代码。你很快就会得到它。

标签： html angularjs scope add subtraction

【解决方案1】：

我想你忘了指定你使用的应用程序，试试下面的代码：

  <html ng-app="app">

【讨论】：

【解决方案2】：

检查一下，您似乎错过了 html 中的 ng-app 包含

<html>

  <head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.1" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="test">
    <div trans-directive></div>
    <h1>Hello Plunker!</h1>
   <div ng-controller="trans">
      <h4>The simplest adding machine ever</h4>
      <button ng-click="add(1)" class="button">Add</button>
      <button ng-click="subtract(1)" class="button alert">Subtract</button>
      <h4>Current count: {{ counter }}</h4>
    </div>
  </body>

</html>
var app = angular.module("test",[]);
app.controller('trans',function($scope){
  $scope.name = 'amruth';
  $scope.word = "ever";
  $scope.counter = 0;
  $scope.add = function(amount) { 
    $scope.counter += amount; 
  };
  $scope.subtract = function(amount) {
    $scope.counter -= amount; 
  };
});

http://plnkr.co/edit/khFwKUvKkruhMa5CYtRt?p=preview

【讨论】：

【解决方案3】：

这是您的有效代码：Plunkr。

需要更改：

ng-app 应该有一个分配给它的值。
将ng-app添加到body标签中，因为你的angular脚本在head标签中，html将无法识别angular
在 angular 之后但在脚本代码之前包含您的 controller.js。

var app = angular.module('app', []);
app.controller('FirstController',function($scope) {
  $scope.word = "ever";
  $scope.counter = 0;
  $scope.add = function(amount) {
    $scope.counter += amount;
  };
  $scope.subtract = function(amount) {
    $scope.counter -= amount;
  };
});

<!DOCTYPE html>
<html>

<head>
  <title>Simple App</title>
  <script data-require="angular.js@1.3.1" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="FirstController">
    <h4>The simplest adding machine ever</h4>
    <button ng-click="add(1)" class="button">Add</button>
    <a ng-click="subtract(1)" class="button alert">Subtract</a>
    <h4>Current count: {{ counter }}</h4>
  </div>

  {{6+2}}


</body>

</html>

【讨论】：

【解决方案4】：

 1. modify html file

Here is solution for your problem.Add following line inside your html code

    <html ng-app='app'>
inside <head> tag add script : <script  src="app.js"></script>

 2. modify controller.js

    app.controller('FirstController',function($scope){});
Error occured because you added extra space between "'FirstController'," and "function($scope){})"

【讨论】：