AngularJs中的函數問題

我是Angular的初學者，並且遇到函數問題。我有一個簡單的代碼。在這裏有兩個警報來調查他們沒有被調用。AngularJs中的函數問題

HTML

<div data-ng-controller="MainCtrl"> 
    <form novalidate class="simple-form"> 
     Last name: 
     <input type="text" name="lname" data-ng-model="product.name"><br> 
     <input type="submit" value="Submit" class="btn btn-sm btn-primary" data-ng-click="mandar()" > 
    </form> 
    <button ng-click="mandar()">Remove</button> 
</div>

我的javascript：

var app =angular.module('pdbApp'); 
app.controller('MainCtrl', function ($scope, $window) { 

$window.alert('I am here!'); 


$scope.mandar=function(){ 
    $window.alert('Hi there!'); 

    };  
});

我也有app.js

angular 
    .module('pdbApp', ['ngRoute']) 
    .config(function ($routeProvider) { 
     $routeProvider 
     .when('/', { 
      templateUrl: 'views/main.html', 
      controller: 'MainCtrl' 
    }) 
    .when('/about', { 
    templateUrl: 'views/about.html', 
    controller: 'AboutCtrl' 
    }) 
    .otherwise({ 
    redirectTo: '/' 
    }); 
    });

，也是我的index.html

<html class="no-js"> 
<head> 
<meta charset="utf-8"> 
<title></title> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width"> 

<link rel="stylesheet" href="styles/main.css"> 
<!-- endbuild --> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

<!-- endbuild --> 


<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script> 


    </head> 
    <body ng-app="pdbApp"> 

    <div class="container"> 
    <div data-ng-view=""></div> 
    </div> 


    <!-- Libraries --> 
    <script src="js/angular.min.js"></script> 
    <script src="js/ui-bootstrap-tpls-0.11.2.min.js"></script> 
    <script src="js/angular-route.min.js"></script> 
    <script src="js/angular-animate.min.js"></script> 

<!-- build:js(.) scripts/vendor.js --> 
<!-- bower:js --> 
<script src="bower_components/jquery/dist/jquery.js"></script> 
<script src="bower_components/angular/angular.js"></script> 
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script> 
<script src="bower_components/angular-animate/angular-animate.js"></script> 
<script src="bower_components/angular-cookies/angular-cookies.js"></script> 
<script src="bower_components/angular-resource/angular-resource.js"></script> 
<script src="bower_components/angular-route/angular-route.js"></script> 
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script> 
<script src="bower_components/angular-touch/angular-touch.js"></script> 
<!-- endbower --> 
<!-- endbuild --> 

    <!-- build:js({.tmp,app}) scripts/scripts.js --> 
    <script src="scripts/app.js"></script> 
    <script src="scripts/controllers/main.js"></script> 
    <script src="scripts/controllers/about.js"></script> 
    <!-- endbuild --> 
    <!-- Some Bootstrap Helper Libraries --> 

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/underscore.min.js"></script> 
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
<script src="js/ie10-viewport-bug-workaround.js"></script>

當我按下按鈕mandar不會發生任何事情。有人可以告訴我爲什麼它不工作？

來源

2015-10-22 Lzarra

你的控制檯有任何錯誤嗎？ – koox00

是您的第一個模塊聲明嗎？ –

你的'ng-app'聲明在哪裏？ – Claies

好像你在你的頁面上添加ng-app="pdbApp"告訴角度在頁面上運行。另外請確保您已在頁面上添加angular.js文件。

標記

<div ng-app="pdbApp" data-ng-controller="MainCtrl"> 
    <form novalidate class="simple-form"> 
    Last name: <input type="text" name="lname" data-ng-model="product.name"><br> 
    <input type="submit" value="Submit" class="btn btn-sm btn-primary" data-ng-click="mandar()" > 
    </form> 
</div>

來源

2015-10-22 10:19:17

@ Lzarra是否幫助你：？ –

沒有任何堆棧跟蹤所有我們能做的就是投機。但正如其他人所說，你需要在你的模板中包含ng-app，所以角度知道該應用程序的HTML範圍。你也需要ng-controller，所以角度知道你的控制器在HTML中的範圍。

然而，這些都是所有教程中涵蓋的基本內容，您做這件事最多的部分就是您的應用程序定義。這會導致您的應用程序失敗，如果它不是故意的。

你做

var app =angular.module('pdbApp');

這告訴角 '我找叫pdbApp現有的應用程序'。然而，這是你的第一個應用程序的拒絕，你需要告訴角色來創建它。

你這樣做，通過增加一個陣列：

var app =angular.module('pdbApp', []);

數組包含應用程序相關的列表，如果您有任何。

來源

2015-10-22 10:24:56 ste2425

AngularJs中的函數問題

回答

相關問題