Question

我想绑定全名= firstname + lastname。

我在w3学校看过这个例子。但我无法理解。

我的问题是如何调用函数？它有听众吗？

有人可以请详细介绍一下。对不起，我是新手..

我的代码是：

 var application = angular.module('myTempApp', []);
        application.controller('myController', function ($scope) {
            $scope.myFirstName = "xxx";
            $scope.myLastName = "yyy";
            $scope.myFunction = function () {
                alert('called');
                $scope.myFullName = $scope.myFirstName + $scope.myLastName;
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
    <div ng-app="myTempApp" ng-controller="myController">
        <input type="text" ng-model="myFirstName" />
        <input type="text" ng-model="myLastName" />
        <input type="text" ng-model="myFullName" ng-bind="myFullName" />
        <br />
        {{ myFunction() }}
      <br/>
         data ::: {{2+2}}
    </div>
</body>

提前致谢。

Answer 1

让我们一步一步。

您绑定了三个文字和一个函数类型变量。无论何时编写任何变量（任何数据类型），它都会在angularJS的摘要周期中注册。因此，firstName，lastName，fullName和myFunction在摘要周期中注册。摘要周期中的每个变量都有一个观察者。

每当变量发生变化时，angularJS会检查在摘要周期中注册的所有变量，并在视图中打印每个变量的最新值。

所以我们假设 - 如果firstName是xxx且姓氏是yyy，你将firstName更改为xx。现在angular将检查firstName和lastName并打印它们的最新值。

因此，每当您对任何范围变量进行任何更改时，角度表达式中的绑定函数都会被调用

Answer 2

如果您想根据其他人更新变量，可以使用$watch

var application = angular.module('myTempApp', []);
application.controller('myController', function ($scope) {
  $scope.myFirstName = "xxx";
  $scope.myLastName = "yyy";
    
  $scope.myFunction = function () {
    //alert('called');
    $scope.myFullName = $scope.myFirstName + $scope.myLastName;
  };
  
  $scope.$watch("myFirstName + myLastName", $scope.myFunction);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
    <div ng-app="myTempApp" ng-controller="myController">
        <input type="text" ng-model="myFirstName" />
        <input type="text" ng-model="myLastName" />
        <input type="text" ng-model="myFullName" ng-bind="myFullName" />
        <br />
        {{ myFunction() }}
      <br/>
         data ::: {{2+2}}
    </div>
</body>

Answer 3

这可能会有所帮助。

function studentController($scope) {
     $scope.student = {
        firstName: "Mahesh",
        lastName: "Parashar",
        fullName: function() {
           var studentObject;
           studentObject = $scope.student;
          return studentObject.firstName + " " + studentObject.lastName;
        }
     };
}

Enter first name: <input type="text" ng-model="student.firstName"><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}

Answer 4

有两种方法可以在模型之间绑定数据（html和控制器将数据绑定到$ scope，ng-bind和{{}}。他们在这里做的是调用{{myFunction（）}}（（行为）像一个监听器），然后每次都在处理myFirstName和myLastName（因为它们发生了变化，新值将保存在$ scope.myfullName中，并呈现给模型）

如何调用角度控制器？

4 个答案: