Angular JS数据没有从视图绑定到模型

the problem I have is that the text field input from my view is not binding to the controller.

我遇到的问题是从我的视图输入的文本字段没有绑定到控制器。

Here's the view snippet:

这是视图片段：

<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>

And here's the controller function that is supposed to handle the input:

这是应该处理输入的控制器函数：

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

}

When saveNewSentence() is invoked it logs null to the console, even if I have an input in the textfield.

当调用saveNewSentence（）时，即使我在文本字段中有输入，它也会将null记录到控制台。

I'm sure I'm missing something, I can't see it, but I have spent too much time on this simple issue, so thank you in advance for helping out!

我确定我错过了一些东西，我看不到它，但是我在这个简单的问题上花了太多时间，所以谢谢你提前帮忙！

4 个解决方案

#1

Your dialog have is own $scope. So:

你的对话框有自己的$ scope。所以：

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

#2

Please set 'preserveScope: true' in Your md-dialog options or.. I'm not sure but try change your ng-model to ex: "dialogObj.theSentence" and read this like this console.log($scope.dialogObj.theSentence);

请在你的md-dialog选项中设置'preserveScope：true'或者..我不确定但是尝试将你的ng-model更改为ex：“dialogObj.theSentence”并读取这个如此console.log（$ scope.dialogObj。这句话）;

#3

if you could share a js-fiddle of your complete block of code, i could have helped you better. But below is an example in which i have created 2 input fields with null set initially and then i keep updating my ng-model.

如果你可以分享你完整的代码块的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>

and JS is as shown below.

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

Let me know if this helps.

如果这有帮助，请告诉我。

#4

I have solved the issue, in a way, by passing the 'binded' data through as the function's parameter's so instead of letting Angular bind the data from the Textfield I called saveNewSentence() with theSentence parameters passed to it such as: saveNewSentence(theSentence). It worked. Seems like a cheap trick to me, but:

我在某种程度上通过将'绑定'数据作为函数的参数传递来解决了这个问题，而不是让Angular绑定来自Textfield的数据我调用了saveNewSentence（）并且传递给它的Sentence参数，例如：saveNewSentence（theSentence））。有效。对我来说似乎是一个便宜的伎俩，但是：

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

如果它是愚蠢的并且它有效，那么它不是愚蠢的

Hope this helps some other baffled soul out there with the similar problem.

希望这有助于其他一些困惑的灵魂出现类似的问题。

#1