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

时间:2015-05-05 10:37:57

标签: html angularjs scope add subtraction

我是一个有角度的初学者,它似乎没有回应我。我正试图通过简单的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>

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

3 个答案:

答案 0 :(得分:2)

我想您忘记指定您使用的应用,请尝试以下代码:

  <html ng-app="app">

答案 1 :(得分:0)

检查一下,似乎你错过了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

答案 2 :(得分:0)

以下是适用的代码:Plunkr

需要更改:

  • ng-app应为其指定值。
  • ng-app添加到body标记,因为您的角度脚本位于head标记中,html将无法识别angular
  • 在角度之后但在脚本代码之前包含您的controller.js。

&#13;
&#13;
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;
  };
});
&#13;
<!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>
&#13;
&#13;
&#13;