Maison > Article > interface Web > Décrire en détail les fonctions du contrôleur d'AngularJS

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

小云云original: 2018-01-26 09:38:391120parcourir

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>

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;
  };
});

Effet :

Recommandations associées :

Explication détaillée de l'instance de contrôleur de contrôleur AngularJS

Tutoriel sur la méthode d'héritage du contrôleur dans AngularJS

Explication détaillée du contrôleur, de la liaison de données et de la portée de l'apprentissage d'AngularJs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html 继承作用域

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment obtenir le numéro de ligne et le numéro de colonne de la position du clic de souris dans le tableauArticle suivant：Comment obtenir le numéro de ligne et le numéro de colonne de la position du clic de souris dans le tableau

Articles Liés

Voir plus