Décrire en détail les fonctions du contrôleur d'AngularJS-js tutoriel-php.cn

Décrire en détail les fonctions du contrôleur d'AngularJS

小云云

Libérer： 2018-01-26 09:38:39

original

1144 Les gens l'ont consulté

Nous avons déjà partagé avec vous une explication détaillée des contrôleurs, de la liaison de données et de la portée de l'apprentissage d'AngularJS. Dans cet article, nous présentons principalement la définition et l'utilisation des fonctions de contrôleur dans AngularJS et analysons la définition des fonctions de contrôleur AngularJS en fonction. sur des exemples spécifiques, des conseils de liaison et d'utilisation associés, les amis dans le besoin peuvent s'y référer, j'espère que cela pourra aider tout le monde.

Texte HTML :

<body ng-app="myApp" ng-controller="myCtrl">
<h2>AngularJS函数绑定</h2>
<textarea ng-model="message" cols="40" rows="10"></textarea>
<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>
<p>剩余字数: <span ng-bind="left()"></span></p>
<!-- AngualrJS的显示和隐藏逻辑控制指令：类似avalon中的ms-visible和knockout的visible指令 -->
<p ng-show="flag">
结果：<font color="red"><span ng-bind="result"></span></font>
</p>

Copier après la connexion

Code d'opération Javascript :

/**
 * AngularJS将属性和函数直接看作是controller的平等成员，
 * 可以调用函数按照普通的属性的调用方式即可(knockout avalon 部分Jquery插件也是使用这种方式定义函数)
 */
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.message = "";
  $scope.result="";
  $scope.flag=false;
  $scope.left = function() {return 100 - $scope.message.length;};
  $scope.clear = function() {
    $scope.message = "";
    $scope.result= $scope.message;
    $scope.flag=false;
  };
  $scope.save = function() {
     $scope.result= $scope.message;
     $scope.flag=true;
  };
});

Copier après la connexion

Effet :