오늘날 Ionic에서 NG- 모델을 사용하면 해당 컨트롤러에서 얻은 값이 정의되지 않습니다. 나는 Angularjs의 ng- 모델 바인딩을 사용할 때 그것을 얻었습니다. 아래 데모를 살펴 보겠습니다.
AngularJS NG- 모델의 데이터 양방향 결합을 학습 할 때 다음 코드를 통해 해당 NG- 모델 값을 얻습니다.
데모 1
<div ng-app = "myapp"ng-controller = "myctrl"> name : <input ng-model = "name"> {{name}} <button ng-click = "show ()"> shoname </button> </div해당 JS
<cript> var app = angular.module ( 'myapp', []); app.controller ( 'myctrl', function ($ scope) {$ scope.show = function () {console.log ($ scope.name); // 페이지 console.log ($ scope)에 올바르게 입력 할 수 있습니다. AllPrpes (obj) {// 모든 속성 이름과 값을 저장하는 데 사용됩니다. var props = ""; obj [p] + ";";}} // 모든 속성은 console.log (propss);$ SCOPE 객체를 인쇄하면 해당 속성에 키 값 이름 쌍이 포함되어 있음을 알 수 있습니다. 그러나 우리가 이온 프로젝트에 있었을 때, 우리는 또한 다음과 같이 얻었습니다.
데모 2
<Ion-View view-title = "채팅"> <ION-Content> <div> 이름 : <input ng-model = "name"> {{name}} <button ng-click = "show ()"> shoname </div> </ion-content> </view>Ionic의 해당 컨트롤러에서 해당 ChatSctrl :
Angular.Module ( 'starter.controllers', []). 컨트롤러 ( 'chatsctrl', function ($ scope) {$ scope.show = function () {console.log ($ scope.name); // console prints undefined console.log (allprps ($ scope ($ scope));});인쇄 된 $ 스코프 속성에는 이름이 발견되지 않았습니다. 콘솔은 정의되지 않은 인쇄되었지만 페이지의 {{name}}은 정상적으로 출력 할 수 있습니다. 이게 왜? 많은 이온의 초보자들이 프로젝트 에서이 상황을 발견 한 것으로 추정됩니다. AngularJS의 데이터 양방향 결합은 이온에서 유효하지 않습니까? 내가 이런 식으로 쓰면 :
데모 3
<Ion-View view-title = "채팅"> <Ion-Content ng-controller = "mychatctrl"> <div> 이름 : <input ng-model = "name"> {{name}} <button ng-click = "show ()" "> shoname </div> </ison-content> </itview>.Controller.js에서 mychatctrl을 재정의하십시오.
Angular.Module ( 'starter.controllers', []). 컨트롤러 ( 'mychatctrl', function ($ scope) {$ scope.show = function () {// click button console.log ($ scope.name); // 콘솔은 모든 시간에 입력 상자에 값을 인쇄 할 수 있습니다 (remprope ($ scope));이런 식으로 모든 사람은 단서를 보았을 것입니다. 실제로 모든 문제의 근본은 범위입니다. NG- 모델, NG-Repeat 등과 같은 지침 명령을 사용하면 범위 자체가 생성됩니다. 실제로, 여기에는 이온 컨트롤러 생성의 타이밍이 포함됩니다. 이온 뷰 경로에서 생성 된 제어 범위의 범위는 아래 Demo2에서 mychatctrl 범위의 범위보다 큽니다. 이 두 가지 스코프는 다르다는 것이 밝혀졌으며, 이는 위의 Demo2에 의해 얻은 값이 정의되지 않은 이유를 설명합니다. 문제를 발견했습니다.이 문제를 해결하면 어떻게됩니까?
스코프 범위를 상속받을 수 있고 JS 객체의 속성도 상속되므로 Demo2를 약간 변경하고 이제 ChatSctrl에서 기본값을 정의 할 수 있습니다.
var $ scope.name = {text : ""};
페이지의 NG 모델 입력 :
<iOn-view view-title = "채팅"> <iOn-content ng-controller = "mychatctrl"> <div> 이름 : <input ng-model = "name.text"> {{name}} <버튼 ng-click = "show ()"> shoname </button> </it-content>이 작업을 마치면 버튼을 클릭하고 $ SCOPE.NAME의 값을 정상적으로 인쇄 할 수 있음을 찾으십시오. 이 작업을 수행하기 위해 객체의 속성을 사용하지 않으려면 바인딩 할 때 부모 범위의 범위에 바인딩 할 수 있으며 Demo2의 Ctrl은 변경되지 않고 페이지의 코드가 다음으로 변경됩니다.
<iOn-view view-title = "채팅"> <Ion-Content ng-controller = "mychatctrl"> <div> 이름 : <input ng-model = "$ parent.name"> {{name}} <버튼 ng-click = "show ()"> shoname </div> </ition-content>이것은 또한 $ scope.name의 값을 얻을 수 있으며 문제가 해결됩니다. 이 문제가 발생하면 동일하게 수행 할 수 있습니다. 다른 솔루션이 있으면 메시지를 남겨주세요.
참조 기사
Ionic의 NG 모델은 가치 문제를 얻을 수 없습니다
Angularjs의 범위를 이해하십시오
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.