2

テンプレート変数 $scope.tpl.partialtemplate1 = 'initialcontactlist.html' を持つコントローラー 'AController' があります。

「AController」は基本的に「mainpage.html」というページ全体を担当します。

<div ng-include="tpl.partialtemplate1"></div>

「mainpage.html」には、連絡先を追加するためのフォームがあります。このフォームは「partialtemplate1」のビューの一部ではありません。

フォームを送信したら、'partialtemplate1' の HTML ビューを最初のページ読み込み時の状態にリセットしたいと思います。これは、連絡先の最新のリストを再読み込みするためです。

新しい連絡先が正常に追加されるたびに変数をインクリメントし、その変数を監視して部分テンプレート変数を変更するなどのことを試しました。

たとえば、「AController」では次のようになります。

  $scope.tpl = {};
  $scope.contactcount = 0;
  $scope.contactsignupdata = new Contact();
  $scope.tpl.partialtemplate1 = 'initialcontactlist.html';
  $scope.successmessage = null;


$scope.addcontact = function() {
  $scope.contactsignupdata.$save();

        $scope.successmessage = 'Saved!';

        $scope.contactsignupdata = new Contact();
        $scope.contactcount = $scope.contactcount + 1;
};

 $scope.$watch('contactcount', function(newValue, oldValue) {
         $scope.$apply(function() {
             $scope.tpl.partialtemplate1 = null;
             $scope.tpl.partialtemplate1 = 'initialcontactlist.html';
         });
    /*$scope.partialtemplate1 = 'projecttasklists.html';*/

    });

partialtemplate 変数が変更されないのはなぜですか? はい、連絡先は毎回正常に保存されます-Rails factoryでそれを処理しました...

4

2 に答える 2

1

$emit でこの問題を解決しました。

HTML ファイルでは、「連絡先を追加」フォームの送信ボタンを押すと、2 つのイベントがトリガーされます (アポストロフィー ボタンで区切られています)。

ng-click="addcontact(contactsignupdata.name);$emit('MyEvent')"
</form>
{{successmessage}}

コントローラーファイルで:

    $scope.successmessage = null;
    $scope.tpl = {};
    $scope.tpl.partialtemplate1 = 'initialcontactlist.html';     

   $scope.addcontact = function(value) {
    $scope.contactsignupdata.$save();

    $scope.successmessage = 'Saved ' + $scope.contactsignupdata.name;

    $scope.contactsignupdata = new Contact();
    };

   $scope.$on('MyEvent', function() {
    $scope.tpl.partialtemplate1 = null;

    $scope.resettofullcontactslist($scope.tpl.partialtemplate1);


});

 $scope.resettofullcontactslist = function(value) {
      $scope.tpl.partialtemplate1 = 'initialcontactlist.html';     
 };
于 2015-02-16T22:42:11.570 に答える
1

あなたのコードは に設定partialtemplate1されnull、その後すぐに に戻り'initialcontactlist.html'ます。Angular に関する限り、何も変更されていません。つまり、partialtemplate1 を変更したからといって、それがすぐに発生したり、特別なイベントをトリガーしたりするわけではありません。この特定のシナリオでは、partialtemplate1 を null に設定し、タイマーを設定してから、「initialcontactlist.html」への変更をトリガーする必要があります。

ちなみに私はこれをお勧めしません

   $scope.$watch('contactcount', function(newValue, oldValue) {
         $scope.$apply(function() {
             $scope.tpl.partialtemplate1 = null;

             $timeout(function() {
                 $scope.tpl.partialtemplate1 = 'initialcontactlist.html';
             }, 1000);
         });

    });

強くお勧めします

照会できる連絡先の API を作成します。そうすれば、連絡先が作成、更新、または削除されたときに、いくつかの方法で自分で処理できます。

  1. 何かが変更されるたびに、データ ソースを再クエリできます
  2. API が変更に関連するデータを返す場合、再クエリを実行する必要はありません

これを処理するには、Angular Services や Factory の作成を検討する必要があります。実際、 $resourceを使用した真の REST API であれば、実装は非常に簡単です。RESTful リソースでない場合は、カスタム クエリに$httpを使用できます

于 2015-02-16T21:12:32.807 に答える