2016-08-23 17 views
0

問題は、私のビューからのテキストフィールド入力がコントローラにバインドされていないことです。ここでAngular 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> 

そしてここでは、入力を処理することになっているコントローラ機能です:

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(); } 

} 

saveNewSentence()が呼び出されると、それもI場合は、コンソールにnullを記録しますテキストフィールドに入力があります。

私は何かが見つからないと確信していますが、私はそれを見ることはできませんが、この単純な問題に時間を費やしています。

答えて

2

ダイアログには独自の$ scopeがあります。だから、:

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

私は親ではなくダイアログ内のデータをバインドしようとしています。 – Yakuman

+0

https://jsfiddle.net/cw797a3b/ – Yakuman

1

「preserveScope:真」を設定してくださいあなたのMD-ダイアログオプションまたは..私はよく分からないが、元にごNG-モデルを変更してみてください:「dialogObj.theSentence」と、このようにこれを読んでconsole.log($scope.dialogObj.theSentence);

+0

'preserveScope:true'が動作せず、' dialogObj.theSentence'がエラーを投げます: 'angle.js:11655 TypeError:設定できませんプロパティ 'theSentence' of undefined' – Yakuman

+0

コントローラ全体がここにあります:https://jsfiddle.net/cw797a3b/ – Yakuman

1

完全なコードブロックのjs-fiddleを共有することができれば、私はあなたの役に立った可能性があります。しかし、以下は、最初にヌルセットで2つの入力フィールドを作成し、次にそのngモデルを更新し続ける例です。

<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

希望、これは同様の問題とそこにいくつかの他の困惑の魂に役立ちます。

関連する問題