search

Home >Web Front-end >JS Tutorial >Describe the controller functions of AngularJS in detail

Describe the controller functions of AngularJS in detail

小云云
小云云Original
2018-01-26 09:38:391144browse

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!

JavaScript html 继承 作用域
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to get the row number and column number of the mouse click position in the tableNext article：How to get the row number and column number of the mouse click position in the table

Related articles

See more