AngularJs 학습 컨트롤러, 데이터 바인딩, 범위 자세한 설명
- 零下一度원래의
- 2017-07-23 18:05:211385검색
1. 컨트롤러:
개념: AngleJS에서 컨트롤러는 뷰 범위에 추가 기능을 추가하고, 범위의 초기 상태를 설정하고, 사용자 정의 동작을 추가하는 데 사용되는 함수입니다.
컨트롤러 선언: app.controller('controllerName',function($scope){...})
// 控制器定义// 第一参数： 控制器名称， 第二个参数： 匿名函数， 传入作用域,并在作用域上添加额外功能app.controller('myCtrl', function($scope) {
$scope.expression = "hello expression";
$scope.ngbind = "hello ng-bind";
$scope.htmlbind = "d12c29ee83e5b622484f1e9842eecbbdhello,htmlbinde6e38b3c62e8df885fe2e3986461aa63";
$scope.subCtrl = "hello subCtrl";
});컨트롤러 사용: 필요한 경우(html 어딘가 태그) add ng- 제어 장치.
<body ng-app="myapp" ng-controller="myCtrl">
위에서 컨트롤의 정의와 사용법은 비교적 간단하지만 컨트롤러의 역할과 컨트롤러에 어떤 코드를 작성해야 하는지 이해하지 못하는 사람들이 많을 것입니다. 전체 코드가 컨트롤러에 푸시됩니다. 개인적으로 컨트롤러는 페이지 보기와 모드 사이의 링크일 뿐이라고 생각합니다. 컨트롤러는 일부 데이터 바인딩, 이벤트 바인딩 등과 일련의 간단한 논리, 특정 서버 액세스만 처리합니다. 또는 데이터 읽기 등이 서비스에 구현되어야 합니다. 서비스에 대해서는 다음번에 자세히 말씀드리겠습니다.
컨트롤을 사용하실 때 참고하실 점을 간단하게 정리했습니다.
1) 컨트롤러 및 $scope와 관련된 작업을 최대한 단순화하세요.
2) 컨트롤러를 재사용하지 마세요. 컨트롤러는 일반적으로 뷰의 작은 부분만 담당합니다.
3) 컨트롤러에서 DOM을 조작하지 마세요. 이는 컨트롤러의 책임이 아닙니다.
4) 컨트롤러에서는 데이터 필터링이나 데이터 작업을 수행하지 마십시오.
5) 일반적으로 Controller들은 서로 호출하지 않습니다. $scope와 관련하여 AngularJs의 범위와 그 수명주기에 대해 간략히 설명하겠습니다.
3. : 
표현식: {{a+b }} 이 방법은 Angular가 표현식을 만나는 한 가장 일반적인 표현식 바인딩입니다. 범위 Angular에서는 자동으로 Html이 인식하는 표현식이나 변수로 구문 분석합니다. 2) 명령어 방식(ng-bind):
이 바인딩 방식은 요소에 ng-bind 명령어를 추가한 후 Angular가 명령어를 파싱하여 바인딩을 실행하는 것입니다. O 3) NG-MODEL:
이 방법은 주로 양식의 양식 제출에 사용되며 양방향 데이터 바인딩, 페이지 콘텐츠와 모델 간의 양방향 데이터를 구현합니다. ㅋㅋ ~ ng-bind-html? 메서드만 해당되지만 바인딩은 직렬화된 js 파일을 참조해야 합니다.
bea4b67a9fe0f78efa78bb17563afef42cacc6d41bbb37262a98f745aa00fbf0
5) ng-bind-template:
이 방법은 여러 변수와 표현식을 한 번에 바인딩할 수 있습니다.
홈페이지는 ng-bind를 사용하고, 템플릿의 페이지는 대괄호 {{}}를 사용할 수 있으며, 양식은 ng-model을 사용하고,
{{}} 구문 결함: 사용자의 지속적인 새로 고침에서 {}도 볼 수 있고, 네트워크가 좋지 않을 때는 도 볼 수 있습니다. 다음 코드는 위 5가지 메소드의 전체 코드입니다.76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a7首页6e916e0f7d1e588d4f442bf645aedb2f
8c811ac8fd9babb9040140530f82b25d
77270bb742f3ad5194245f4c8255d4462cacc6d41bbb37262a98f745aa00fbf0
60220d8de1216b63e9c1b28a224c045e
bea4b67a9fe0f78efa78bb17563afef42cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
ccdadbad7e3059b89eb400c635c34cbf
1f053390e7c21aca8a3642f3056f0325
f134b2367422703a79a890ff392a97ed
4a249f0d628e2318394fd9b75b4636b1{{expression}}473f0a7621bec819994bb5020d29372a
111b486f21321f3cada78ef45ecdb88b
c1a436a314ed609750bd7c7d319db4da{{ngmodel}}2e9b454fa8428549ca2e64dfac4625cd
29f0abed5aaa39b48e876871254471b0
019e17b222897eccffa24631cf5a4ef8
55c6de69ad377b88a286836e38b9a14639528cedfa926ea0c01e69ef5b2ea9b0
e98a5e78d495c45e9e5b79ae614e661739528cedfa926ea0c01e69ef5b2ea9b0
3705e54a06f7229001d05ca799a8e1b1
6235f479a55e5cc5abecaaa6ff74a16b0f6dfd1e3624ce5465eb402e300e01ae
1f1e0a0a08c80c27718d6a0eccae0f79
1297111b1e5dbccf7bcf0ba0c1d6d63a46eb22d0a433f22cff9940d34d5612bf
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
3f1c4e4b6b16bbbd69b2ee476dc4f83a//模块定义// 第一个参数：应用名称，第二个参数：应用依赖模块var app = angular.module('myapp', ['ngSanitize']);// 控制器定义// 第一参数： 控制器名称， 第二个参数： 匿名函数， 传入作用域,并在作用域上添加额外功能app.controller('myCtrl', function($scope) {
$scope.expression = "hello expression";
$scope.ngbind = "hello ng-bind";
$scope.htmlbind = "d12c29ee83e5b622484f1e9842eecbbdhello,htmlbinde6e38b3c62e8df885fe2e3986461aa63";
$scope.subCtrl = "hello subCtrl";
});2cacc6d41bbb37262a98f745aa00fbf0
위 내용은 AngularJs 학습 컨트롤러, 데이터 바인딩, 범위 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!