컨트롤러 생성
AngularJS 컨트롤러는 모든 곳에서 사용되며 코드 데모는 비교적 간단합니다.
<! docType html> <html xmlns = "http://www.w.org//xhtml"ng-app = "emaffplepp"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-"/> app </title> </title> src = "angular.js"> < /script> <link href = "bootstrap-theme.css"rel = "stylesheet" /> <link href = "bootstrap.css"rel = "stylesheet"/> <script> angular.module("ExampleApp ", []). {$ scope.setInput = function (value) {console.log ( "print :" + value);}}); </script> </head> <body ng-controller = "defaultctrl"> <div> <h> count </h> <div> <입력 ng-model = "value"/> <버튼 ng-click = "setInput (value)"> 클릭 </button> </div> </body> </html>컨트롤은 매우 간단합니다. 먼저, 모듈의 범위를 나타 내기 위해 HTML에 ng-app 속성을 추가했습니다.
기본 CTRL 컨트롤러의 범위를 나타 내기 위해 본체에 ng-controller를 추가했습니다.
입력 노트의 NG- 모델 명령은 바인딩 데이터, 양방향 데이터 바인딩 (MVVM)입니다.
$ SCOPE는 AngularJS의 내장 범위입니다.
이 예제는 그림과 같이 입력 값을 콘솔에 인쇄하는 것입니다.
그게 전부입니다. 간단합니다.
다중 컨트롤러 범위 문제
이제 프로그램을 수정합시다.
<body> <div ng-controller = "defaultctrl"> <h> count </h> <div> <입력 ng-model = "value"/> <button ng-click = "setInput (value)"> 클릭 </button> </div> </div> <div ng-controller = "divaultCtrl"> <inpud restitt n-mod ruitting n-mod " /> <버튼 ng-click = "setInput (value)"> 클릭 </button> </div> </body>
코드의 나머지 부분은 변경되지 않은 상태로 남아 있습니다. NG 컨트롤러를 신체에 넣은 속성을 두 개의 div에 넣었습니다. DefaultCtrl 컨트롤러를 재사용했습니다. 첫 번째 입력 태그에 콘텐츠를 입력하고 두 번째 컨트롤러의 버튼 버튼을 클릭하면 결과가 나타날까요?
결과는 당신이 생각하는 것과 동일합니까? 결과가 정의되지 않은 것을 알 수 있습니다. 좋은 설명에서는 범위가 다르기 때문입니다. Unified Controller를 재사용했지만 생성 할 때 범위가 실제로 다릅니다.
불리는 공장 기능은 다른 스코프를 반환합니다.
그렇다면 다른 스코프 사이에 어떻게 접근 하는가? AngularJS에는 스코프 액세스를위한 $ rootscope가 있습니다.
다음은 소개 할 세 가지 기능입니다.
$ on (이름, 핸들러) 현재 범위에서 특정 이벤트를 수신 할 때 호출되는 이벤트 핸들러 기능을 등록하십시오.
$ emit (name, args)는 루트 범위까지 이벤트를 현재 상위 스코프로 보냅니다.
$ Broadcast (이름, Args)는 현재 범위에 따라 하위 스코프로 이벤트를 보냅니다. 매개 변수는 이벤트 이름 및 이벤트에 추가 데이터를 제공하는 데 사용되는 객체입니다.
이제 다음 코드를 변경합니다.
<cript> angular.module ( "emaxPleApp", []). 컨트롤러 ( "defaultCtrl", function ($ scope, $ rootscope) {$ scope. $ on ( "updateValue", function (event, args) {$ scope.input = args.zip;}); $ scope.setInput = 함수 (values) {$ rootsc. {zip : value}; console.log ( "print :" + $ scope.input);} $ scope.copy = function () {console.log ( "copy :" + $ scope.input);};}); </script> <div ng-controller = "defaultCtrl"> </h> <div> <ing-model verritte " /> <버튼 ng-click = "copy ()"> copy </button> </div> </div>세그먼트 코드에서 여러 기능을 추가하고 동시에 두 번째 컨트롤러의 기능을 변경했습니다.
결과:
일어났다.
컨트롤러 상속
<cript> angular.module ( "exampleApp", []). 컨트롤러 ( "defaultCtrl", function ($ scope, $ rootscope) {//$scope.$on( 따법 (event, args) {// $ scope.input = args.zip; //}); $ scope.setinput = function (value). {//$ROOTSCOPE.$BROADCOPE("UPDATEVALUE ", {zip : value}); $ scope.input = value; console.log ("print : " + $ scope.input);} $ scope.copy = function () {console.log ("coppe : " + $ scope.input);}). {$ scope.copy = function () {console.log ( "copy :" + $ scope.input);};}); </script> <body ng-controller = "defaultCtrl"> <div> <h> count </h> <div> <입력 ng-model = "value"/> <button ng-click = "setInput (value)"> 클릭 </button> </div> <div> <div ng-controller = "simplectrl"> <h> count </h> <div> <입력 ng-model = "value"/> <button ng-click = "copy ()"> copy </button> </div> </body> </body>컨트롤러를 추가했고 Simplectrl을주의 깊게 관찰 한 후 DefaultCtrl에 Simplectrl이 포함되어있어 기능이 상속됩니다.
결과 : 첫 번째 창에 입력을 게시했을 때 두 번째 창도 변경되었으며 동일한 값이어야합니다.
$ SCOPE SCOPE 문제, 컨트롤러를 사용할 때 범위를 이해해야합니다.