Heim > Artikel > Web-Frontend > Beschreiben Sie die Controller-Funktionen von AngularJS im Detail

Beschreiben Sie die Controller-Funktionen von AngularJS im Detail

小云云Original: 2018-01-26 09:38:391120Durchsuche

Wir haben Ihnen zuvor ausführliche Erläuterungen zu Controllern, Datenbindung und Umfang beim AngularJS-Lernen gegeben. In diesem Artikel stellen wir hauptsächlich die Definition und Verwendung von Controller-Funktionen in AngularJS vor und analysieren die Definition der AngularJS-Controller-Funktionen Freunde in Not können sich auf konkrete Beispiele, Bindungen und zugehörige Anwendungstipps beziehen. Ich hoffe, es kann allen helfen.

HTML-Text:

<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>

Javascript-Operationscode:

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

Wirkung:

Verwandte Empfehlungen:

Detaillierte Erklärung der AngularJS-Controller-Controller-Instanz

Tutorial zur Methode der Controller-Vererbung in AngularJS

Detaillierte Erläuterung des Controllers, der Datenbindung und des Umfangs des AngularJs-Lernens

Das obige ist der detaillierte Inhalt vonBeschreiben Sie die Controller-Funktionen von AngularJS im Detail. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html 继承作用域

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erhalten Sie die Zeilennummer und Spaltennummer der Mausklickposition in der TabelleNächster Artikel：So erhalten Sie die Zeilennummer und Spaltennummer der Mausklickposition in der Tabelle

In Verbindung stehende Artikel

Mehr sehen