Angular 1. x 모듈, controller, 역할 영역 에 대한 개념
5100 단어 자바 script
function myController($scope){
$scope.message ='hi guys!'
}
컨트롤 러 를 만 들 때, angular 는 새로운 $scope (국부 작용 역) 를 생 성 합 니 다. 컨트롤 러 의 역할 역 은 부모 컨트롤 러 와 하위 컨트롤 러 와 같은 끼 워 넣 을 수 있 습 니 다.
$scope 가능
전 체 를 오염 시 키 지 않도록 모듈 을 사용 하여 다음 과 같이 수정 해 야 합 니 다.
angular.module('myapp',[])
.controller('myController',function($scope){
$scope.message ='hi guys!'
})
상기 몇 가지 개념 과 관련 된 또 하나의 개념 명령 directives 는 html 요소 와 속성 을 사용자 정의 하 는 것 으로 이해 할 수 있 습 니 다.
명령 이 생 성 될 때, angular 도 그녀 에 게 역할 영역 을 만들어 줍 니 다.이 작용 역 은 외부 작용 역 과 독립 작용 역으로 나 뉜 다.
가장 간단 한 지령 을 살 펴 보 겠 습 니 다.
angular.module('myapp',[])
.directive('my-directive',function(){
return {
restrict:'E',
template:'Click me to baidu'
}
})
명령 에 데 이 터 를 전달 하면 외부 contrller 의 역할 영역 속성 을 직접 사용 할 수 있 습 니 다.문 제 는 컨트롤 러 가 제거 되 거나 수정 되면 우리 의 명령 을 수정 해 야 한 다 는 것 이다.
다음 과 같은 형식 으로 독립 적 인 역할 도 메 인 을 만 들 고 바 인 딩 전략 으로 데 이 터 를 명령 에 전달 할 수 있 습 니 다.
angular.module('myapp',[])
.directive('my-directive',function(){
return {
scope:{}/* */
restrict:'E',
template:'Click me to baidu'
}
})
실례 는 아래 와 같다
angular.module('myapp',[])
.directive('my-directive',function(){
return{
restrict:'A',
repalce:true,
scope:{
myUrl:@,
myLinkText:@
},
template:''+'{
{myLinkText}}'
};
});
3 ：@，＝，&。
& ， ， ， key ， 。
, show({email:data})
controller scope ， controller ，$scope 。
var module=angular.module('myApp',[])
// module.controller('mainController',function() {
// // body...//
this.name ="Ari";
// this.hello = function(){
// alert('hi');
// }
// });
module.controller('mainController',mainController);
function mainController(){
this.name ="Ari";
this.hello = function(){
alert('hi');
}
}
module.controller('controller2',controller2);
function controller2($scope){
$scope.sex =" ";
}
controler as 를 사용 하면 코드 에서 $scope 에 대한 의존 을 제거 하고 결합 성 이 작은 순수 JS 함 수 를 쓸 수 있 습 니 다.
* * controller as 에 대한 작성 방법 은 다음 과 같 습 니 다. 링크angular.module("app",[])
.controller("demoController",[function(){
var vm = this;
vm.title = "angualr";
return vm;
}])
그 장점 은: vm 를 정의 하면 자바 스 크 립 트 의 this 구 덩이 를 더욱 잘 피 할 수 있 습 니 다. 어떤 버 전의 angular 가 contrller as 를 지원 하지 않 는 다 면 $scope 를 쉽게 주입 하여 var vm = $scope 로 수정 할 수 있 습 니 다. $scope 를 더 이상 주입 하지 않 기 때문에 contrller 의 더 많은 POJO 는 아주 일반적인 JavaScript 대상 입 니 다. 또한 $scope 가 없 기 때문에 contrller 인 스 턴 스 는 scope 의 속성 이 될 것 입 니 다. 그래서 contrller 에서 우 리 는 더 이상 $watch, $emit, $on 같은 특수 한 방법 을 사용 할 수 없습니다. 왜냐하면 이런 것들 은 contrller 에 나타 나 지 말 아야 하기 때문에 경 고 를 하고 더 좋 은 통 제 를 할 수 있 습 니 다.하지만 필요 한 방법 이 없다 면 프로젝트 팀 의 일 치 된 동 의 를 얻어 이 controller 를 $scope 로 돌려 보 낼 수 있 습 니 다. controller 인 스 턴 스 는 $scope 의 속성 일 뿐 이 므 로 view 템 플 릿 의 모든 필드 는 인 용 된 속성 에 있 습 니 다. 이것 은 JavaScript 프로 토 타 입 체인 이 값 형식 에 대한 구 덩이 를 계승 하 는 것 을 피 할 수 있 습 니 다.참가 하 다.https://github.com/angular/an... controller as 는 coffescript, livescript 에 더욱 우호 적 입 니 다. 템 플 릿 에 정 의 된 모든 필드 방법 은 scope 에서 contrller as 별명 에 대한 참조 가 있 기 때문에 contrller 계승 에 서 는 이름 충돌 문제 가 발생 하지 않 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
