提交按钮不工作AngularJS

Question

提交按钮不工作AngularJS

Fos*_*ino 4 javascript twitter-bootstrap angularjs angularjs-directive angularjs-scope

所以基本上我要做的是输入两个数字n1和n2,然后使用angular打印它们的总和.我用过bootstrap来造型.但是我注意到没有发生任何事情,所以检查我alert()在要调用的函数中添加了函数,但仍然没有以某种方式访问它.我不懂jQuery.

PS:当我使用text1+text2它时,将字符串合并而不是打印总和

这是我的HTML:

<!DOCTYPE html>
<html ng-app="store">
  <head >
    <title>Trying Angular</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css">
  </head>
  <body>
    <form class="form-inline" style="border: 2px solid blue; max-width:500px;" ng-controller="formCtrl as formCtrl" ng-submit="formCtrl.submit()">

    <div class="form-group">
      <label>Enter n1</label>
      <input type="text" class="form-control" placeholder="enter the first number" ng-model="text1">
      <p>{{ text1}}</p>
    </div>


    <div class="form-group">
      <label>Enter n2</label>
      <input type="text" class="form-control" placeholder="enter the second number" ng-model="text2">
      <p >{{text2}}</p>

    </div>
    <div class="form-group"  style="display:block; margin:10px auto; margin-left:370px;">
      <input type="submit" class="form-control"  >
    </div>

     <p>  Your SUM of two numbers is ={{text1+text2}}</p>
   </form>

   <script src="angular.min.js"></script>
   <script  src="exp1.js"></script>
   <script src="jquery.min.js"></script>
   <script src="bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是我的角度代码:

(function(){
    var app=angular.module('store',[]);

    var n1=0;
    var n2=0;

    app.controller('formCtrl',function(){
          this.submit=function(){alert("successful");}; // <----- alert()
    });
})();

Run Code Online (Sandbox Code Playgroud)

Answer 1

JLR*_*she 5

如ngController指令的文档中所述,有两种方法可以访问控制器的成员:

使用as <scopeProperty>语法,并使用以下<scopeProperty>名称访问它:

<form class="form-inline" style="border: 2px solid blue; max-width:500px;" ng-
      controller="formCtrl as fc" ng-submit="fc.submit()">

Run Code Online (Sandbox Code Playgroud)

这里,fc被声明为控制器实例的名称,并且可以使用它来访问其属性fc.

例

注入$scope控制器并为其添加属性:

app.controller('formCtrl', ['$scope', function($scope){
     $scope.submit = function(){alert("successful");};
}]);

Run Code Online (Sandbox Code Playgroud)

<form class="form-inline" style="border: 2px solid blue; max-width:500px;" ng-
      controller="formCtrl" ng-submit="submit()">

Run Code Online (Sandbox Code Playgroud)

这里,控制器的属性被添加到$scope,这允许我们直接在HTML中访问它们而不使用点符号.

例

与上面链接的页面比较和对比了这两种方法.你并没有完全使用它们,这就是你遇到麻烦的原因.

归档时间：	10 年，10 月前
查看次数：	12461 次
最近记录：	8 年，10 月前