2016-08-23 8 views
0

문제는 제가보기에 텍스트 필드 입력이 컨트롤러에 바인딩되지 않는다는 것입니다. 여기 각도 JS 데이터가 뷰에서 모델로 바인딩되지 않습니다.

뷰 조각입니다 :

<md-dialog-content ng-if="mode=='addSentence'" class="sticky-container"> 
    <md-input-container> 
     <label for="sentence-text">Enter the sentence to be corrected</label> 
     <input ng-model="theSentence" name="sentence-text"/> 
    </md-input-container> 
    <span flex>{{ error }}</span> 
    <md-button class="primary" style="float:right;" aria-label="Save" ng-click="saveNewSentence()">Save</md-button> 
</md-dialog-content> 

그리고 여기에 입력 처리하도록되어 컨트롤러 기능입니다 : 경우에도, saveNewSentence()는 콘솔에 null를 기록 호출 될 때

function ViewSentenceController($scope, $rootScope, $mdDialog) { 
    $scope.mode = mode; 
    $scope.user = user; 
    $scope.theSentence = null; 

    $scope.saveNewSentence = function() { 
     console.log($scope.theSentence); 
    } 

    $scope.cancel = function() { $mdDialog.hide(); } 

} 

를 I 텍스트 필드에 입력이 있어야합니다.

나는 뭔가를 놓친 것 같아 보이지 않지만이 간단한 문제에 너무 많은 시간을 썼다. 그래서 도와 주셔서 미리 감사드립니다!

답변

2

귀하의 대화 상자에는 $ 범위가 있습니다. 그래서 : 귀하의 MD-대화 상자 옵션에서 '진정한 preserveScope를'나 .. 잘 모르겠어요하지만 전에 NG-모델을 변경하려고 :

<input ng-model="$parent.theSentence" name="sentence-text"/> 
    </md-input-container> 
+0

부모가 아닌 대화 상자 내에서 데이터를 바인딩하려고합니다. – Yakuman

+0

여기서 전체 컨트롤러를 볼 수 있습니다 : https://jsfiddle.net/cw797a3b/ – Yakuman

1

설정하십시오 "dialogObj.theSentence"와 같이 이것을 읽을 console.log($scope.dialogObj.theSentence);

+0

'preserveScope : true'가 작동하지 않고'dialogObj.theSentence'가 오류를 발생시킵니다 : angle.js : 11655 TypeError : Can not set 속성 'theSentence'of undefined' – Yakuman

+0

컨트롤러의 전체 내용은 다음과 같습니다. https://jsfiddle.net/cw797a3b/ – Yakuman

1

전체 코드 블록을 js-fiiddle로 공유 할 수 있다면 나에게 도움이 될 수 있습니다. 하지만 아래는 처음에 null로 설정된 2 개의 입력 필드를 만든 후 내 ng-model을 계속 업데이트하는 예입니다.

<body data-ng-app="formApp"> 
<div data-ng-controller="FormCtrl"> 
    <p> 
     Name of Topic: <input type="text" data-ng-model="formData.title" placeholder="enter a title" /> 
    </p> 
    Subscribers: 
    <button data-ng-click="addSubscriber()">Add subscriber</button> 
    <table> 
     <tr> 
      <th>Name</th> 
      <th>Email</th> 
     </tr> 
     <tr data-ng-repeat="subscriber in formData.subscribers"> 
      <td><input type="text" data-ng-model="subscriber.name" placeholder="enter name" /></td> 
      <td><input type="text" data-ng-model="subscriber.email" placeholder="enter email" /></td> 
     </tr> 
    </table> 
    <hr style="margin:1em 0;" /> 
    <p> 
     <em>Debug info</em>: {{ formData }} 
    </p> 
</div> 

및 JS 아래 도시하는 바와 같이

.

(function() { 
var formApp = angular.module("formApp", []); 
formApp.controller("FormCtrl", function ($scope, $timeout) { 
    $scope.formData = {}; 
    $scope.formData.subscribers = [ 
     { name: null, email: null } 
    ]; 
    $scope.addSubscriber = function() { 
     $scope.formData.subscribers.push({ name: null, email: null }); 
    }; 
}); 
})(); 

이 정보가 도움이되는지 알려주십시오.

+0

여기에 jsfiddle https://jsfiddle.net/cw797a3b/이 있습니다. 전체 컨트롤러 인 html은 절대적으로 기본적인 mdDialog입니다. 물건. – Yakuman

0

나는 같은에 전달 theSentence 매개 변수와 함께 saveNewSentence()라는 텍스트 필드에서 데이터를 함수의 매개 변수의 등을 통해 '바인더 제본'데이터를 전달 그래서 대신의 각도 바인드 시켜서, 방법으로 문제를 해결 한 : saveNewSentence(theSentence) . 그것은 효과가 있었다. 나에게 싸구려 속임수처럼 보이지만 :

if it's stupid and it works, then it ain't stupid

희망이가 비슷한 문제로 거기에 다른 당황 영혼을하는 데 도움이됩니다.

관련 문제