0

我有一个输入框和一个文本区域，它们保存在一个模式窗口中，该窗口在单击按钮时打开。相同的输入框和 textarea 被用于不同目的的第二个模式使用。每个模态都在不同的控制器下。因此，当我单击第一个控制器的按钮时，我希望将某些更改应用于模态，而不是单击另一个控制器的按钮时。

但是，由于这些控制器共享这些输入和文本区域字段，因此有时来自一个和另一个的信息由于其中的 s 而相互传递ng-model。其他时候，如果我打开一个模式窗口，输入输入，关闭它，然后重新打开同一个窗口，内容仍然保留在输入字段中。

这都是因为我不知道如何从我的控制器中更新这些输入/文本区域字段的内容。我不确定我做错了什么。我的模型没有更新 DOM——求助？

ControllerA，对于新职位：

$scope.anonOrName = "anonymous"; //value when user posts anonymously
$scope.systemUserName="name from system here"; //value when user posts not-anon

//New title defined by the user for the post.
$scope.title="";

//post content the user fills in
$scope.postContent = "";

/*
* Operates the New Post modal window, calling functions from the modalManager
*factory
*/
$scope.newIdeaClick = function() {
    $scope.title=""; //make sure title input is blank, doesn't work
    $scope.postContent=""; //make sure the textbox is blank, doesn't work
    document.getElementById('title').disabled = false; //allows user to type a new title, sometimes doesn't work
    document.getElementById('anonymous').disabled = true; //user must post anonymously
    modalManager.open('newPost'); //open the modal window
};

ControllerB，对于新的评论：

$scope.anonOrName = "anonymous";
$scope.systemUserName="name from system here";

//Title of the post the user is commenting on. The user cannot change this.
$scope.title="";

// Content of the textarea, the new comment written by the user.
$scope.postContent = "";


/*
* Operates the New comment modal window, calling functions from the modalManager factory
*/
$scope.newCommentClick = function() {
    $scope.title="(some title will go here"; //sets the title, cannot be changed, doesn't work
    $scope.postContent=""; //make sure the textbox is blank, doesn't work
    document.getElementById('anonymous').disabled = false; //user can select anon or not
    document.getElementById('title').disabled = true; //user may not choose new title
    modalManager.open('newComment');
};

index.html有两个调用如下代码，一个在 ControllerA 下，另一个在 ControllerB 下：

<modal>
    <input ng-model="title" class="titleInputBox" id="title" />
    <div class="commentPostName">
        <div class="nameBlank">
            {{anonOrName}}
        </div>
        <label>
            Anonymous: 
            <input type="checkbox" ng-model="anonOrName" class="anonCheckBox" ng-true-value="anonymous" ng-false-value="{{systemUserName}}" id="anonymous" />
        </label>
    </div>
    <textarea id="postBodyTextArea" ng-model="postContent">
    </textarea>
</modal>

title并且postContent是我的两个模型，每次单击相应的帖子或评论按钮时，我都尝试将其设置为空白，并调用每个控制器中定义的单击函数。但他们不会更新 DOM 中的空白。

任何帮助将不胜感激！

更新：通过调试语句，我已经能够确定值本身已被重置为空白，就像我编写的代码一样，但是这种更改根本不尊重 DOM。我也尝试在这些模型上使用 $scope.$watch 来做同样的事情，但没有运气。

更新：选择的答案有效，但我的代码中有各种其他错误，这些错误使正确答案无法发挥作用。但它现在正在工作！只是没有上面的代码。

4

1 回答 1

3

该问题可能是由范围继承引起的。您应该将字符串值作为属性存储在对象中$scope.title，而不是这样做。$scope.postContent

$scope.models = {
    title : "",
    postContent: ""
};

在标记中

<input ng-model="models.title" class="titleInputBox" id="title" />
<textarea id="postBodyTextArea" ng-model="models.postContent">

模态的直接控制器可能不是您编写的控制器，而是您的控制器的子控制器。有关这方面的详细信息，请阅读理解范围，您可能会从中受益，因为这是一项常见任务。

于 2014-06-24T20:50:32.540 回答