Question

我是Anuglar JS的新手刚学习基础知识并编写了以下程序：

<html>
<head>
    <script src="js/angular.min.js"></script> 
    <script src="js/mycontroller.js"></script>
    </head>
<body ng-app="myapp">

    <div ng-controller="MyFirstController">

        <input type="text" name="username" ng-model="username">
        <input type="button" value="submit" ng-click="checkvalidate()">
        Username entered is {{username}}
        Result is {{checkvalidate()}}
    </div>

我的控制器是

var app=angular.module('myapp',[]);
app.controller('MyFirstController',function($scope)
              {

    $scope.checkvalidate=function()
    {
      //  alert($scope.username);
        console.log("called");
        var user=$scope.username;
        if(user.indexOf('@')!=-1)
            return true;
        else
            return false;
    };
});

当我在文本字段中输入文本时，会为输入的每个字符调用方法checkvalidate（）。为什么会被召唤。

请更新我不想理解的事情。感谢

Answer 1

您输出：

Result is {{checkvalidate()}}

当刷新视图时，它会向您的函数询问数据。每次更改用户名模型时，View都会刷新。将验证分配给变量并在视图上输出。类似的东西：

$scope.isValid = false;
$scope.checkvalidate=function()
    {
      //  alert($scope.username);
        console.log("called");
        var user=$scope.username;
        if(user.indexOf('@')!=-1)
            $scope.isValid = true;
        else
            $scope.isValid = false;
    };

而不是html：

Username entered is {{username}}
Result is {{isValid }}

Answer 2

这是由于当您在行中打印方法时Angular的摘要周期：

Result is {{checkvalidate()}}

我建议在checkValidate函数中设置一个“isValid”变量来跟踪它是否有效。这样你就可以打印它而不会发生这种情况。

Result is {{isValid}}

Answer 3

Angular，就像一堆其他现代前端视图框架一样实现data binding。

这意味着Angular让您以声明性语法编写视图。例如：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <input ng-model="username" type="text"/>
  <p>The username is {{username}}
</div>

这意味着，“让此输入处理变量username”。它并不一定意味着angular会观察onchange事件，因为ng-model指令可用于一堆不同类型的输入，甚至是非HTML5标准输入。

每次角度重绘视图时，它都会询问范围的用户名值并更改视图。

当您将调用插入到checkvalidate等á函数时会发生类似的事情。

Angular：在文本字段上更改文本时调用onclick方法

3 个答案: