Home > Article > Web Front-end > Describe the controller functions of AngularJS in detail
Previously we shared with you a detailed explanation of controllers, data binding, and scope in AngularJS learning. In this article, we mainly introduce the definition and usage of controller functions in AngularJS, and analyze the definition of AngularJS controller functions in combination with specific examples. , binding and related usage tips, friends in need can refer to it, I hope it can help everyone.
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 operation code:
/** * 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; }; });
Effect:
Related recommendations:
AngularJS controller controller instance detailed explanation
AngularJS Controller controller inheritance method tutorial
AngularJs learning controller, data binding, scope detailed explanation
The above is the detailed content of Describe the controller functions of AngularJS in detail. For more information, please follow other related articles on the PHP Chinese website!