javascript - AngularJs 中的函数问题

标签 javascript angularjs angularjs-controller angularjs-module

我是 Angular 的初学者,我对函数有疑问。我有一个简单的代码。因为有两个警报需要探测,但他们没有被调用。

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 按钮时,没有发生任何事情。 谁能告诉我为什么它不起作用?

最佳答案

似乎您在页面上添加了 ng-app="pdbApp" 来告诉 Angular 在页面上运行。另请确保您已在页面上添加 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>

关于javascript - AngularJs 中的函数问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33278626/

相关文章:

javascript - 无法在我的模板中获取发布对象模型

css - AngularJS - ng-Style 在指令中更新时不会改变

javascript - 简单的 Angular 代码不起作用

javascript - 如何在angularjs的ngDialog框中加载动态选项卡?

javascript - React 应用程序中的意外 token 错误

javascript - 如何将小书签转换为 Greasemonkey 用户脚本?

javascript - 数据绑定(bind)在 AngularJS 中不起作用

html - 整个 Controller 在函数调用中被调用

javascript - 替换正则表达式后,我失去了对 &lt;input&gt; 的关注

javascript - Angular.js - 根据 View 显示链接