0

ボタンをクリックすると開くモーダルウィンドウ内に入力ボックスとテキストエリアがあります。同じ入力ボックスとテキストエリアが、目的の異なる 2 番目のモーダルで使用されています。各モーダルは異なるコントローラーの下にあります。したがって、最初のコントローラーのボタンをクリックすると、他のコントローラーのボタンをクリックしたときとは対照的に、特定の変更がモーダルに適用されます。

ただし、これらのコントローラはこれらの入力フィールドとテキストエリア フィールドを共有するため、コントローラ内の 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には、次のコードの呼び出しが 2 つあります。1 つは ControllerA の下、もう 1 つは 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は、それぞれの投稿またはコメント ボタンがクリックされるたびに空白に設定しようとしている 2 つのモデルであり、各コントローラーで定義されているクリック関数を呼び出します。ただし、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">

モーダルの直接のコントローラーは、作成したコントローラーではなく、コントローラーの子である可能性があります。詳細については、Understanding Scopesをお読みください。これは一般的なタスクであるため、おそらく役立つでしょう。

于 2014-06-24T20:50:32.540 に答える