집 > 기사 > 웹 프론트엔드 > AngularJS 컨트롤러 기능에 대한 자세한 설명

AngularJS 컨트롤러 기능에 대한 자세한 설명

小云云원래의: 2018-01-26 09:38:391120검색

이전에 AngularJS 학습에서 컨트롤러, 데이터 바인딩, 범위에 대한 자세한 설명을 공유한 적이 있습니다. 이번 글에서는 주로 AngularJS에서 컨트롤러 기능의 정의와 사용법을 소개하고, 이를 기반으로 AngularJS 컨트롤러 기능의 정의와 바인딩을 분석했습니다. 구체적인 예시가 필요한 친구들은 설정 및 관련 사용법을 참고하여 모두에게 도움이 되기를 바랍니다.

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>

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

효과:

AngularJS 컨트롤러 기능에 대한 자세한 설명

관련 기사