$ httpサービスが更新されていません。表示

Question

私は2つのコントローラを別のコントローラの中に入れています。 ParentControllerにはChildControllerで使用しているオブジェクトが1つあります。これは、子で直接使用できるためです。今、子供で、私は$ httpサービスを呼び出して、このオブジェクトを更新しています。私はそれがビューを更新すべきだと思う。

私は$ scope（）を呼び出そうとしましたが、$ apply（）はsuccess関数を約束しましたが、私はこのメソッドの使い方を本当に理解できないと思います。ページを更新せずにDOMを更新するには？

$ scope。$ apply（）内で$ httpサービスを呼び出す方法についても読んでいます。どうやってするか？

$scope.addVideo = function (data) { 
      console.log('scope tutorial', tutorial); 
      $http.post('/tutorials/' + tutorial.id + '/videos/', $scope.formData) 
      .then((response) => { 
       $window.tutorial.videos.push(response.data.video); 
       window.location = '/tutorials' + tutorial.id; 
      }) 
} 

ここで、UIでは、私はチュートリアルを追加するのを担当するTutorialsControllerを使用しています。私はそれがフォームであり、フォームでのみ動作することを意味します。次に、このチュートリアルでvidoesを表示するVideoControllerがあります。

<div ng-controller="TutorialsController"> 
// add video in this tutorial logic 
<ol ng-repeat="vid in tutorial.videos" ng-controller="VideoController"> 
<li>{{vid.title}}</li><button>Delete</button> 
</ol> 
</div> 

ビデオが親によって追加されたとき、私は子供を更新すると、子供のVideoControllerは、削除ボタンで動画を削除したときに、私は親スコープから削除します。

Answer 1

$scope.addVideo = function (data) { 
    console.log('scope tutorial', tutorial); 
    $http.post('/tutorials/' + tutorial.id + '/videos/', $scope.formData) 
    .then((response) => { 
     ̶$̶w̶i̶n̶d̶o̶w̶.̶t̶u̶t̶o̶r̶i̶a̶l̶.̶v̶i̶d̶e̶o̶s̶.̶p̶u̶s̶h̶(̶r̶e̶s̶p̶o̶n̶s̶e̶.̶d̶a̶t̶a̶.̶v̶i̶d̶e̶o̶)̶;̶ 
     $scope.tutorial.videos.push(response.data.video); 
     ̶w̶i̶n̶d̶o̶w̶.̶l̶o̶c̶a̶t̶i̶o̶n̶ ̶=̶ ̶'̶/̶t̶u̶t̶o̶r̶i̶a̶l̶s̶'̶ ̶+̶ ̶t̶u̶t̶o̶r̶i̶a̶l̶.̶i̶d̶;̶ 
    }) 
} 

Answer 2

完全なコードが書かれていないことを考慮すると、私はいくつかの推測を行い、あなたのために何かを用意しました。あなたが絶対にあなたがそれを必要としない限り$ scope。$ applyを使わないようにしてください。ほとんどの時間はあなたのダイジェストサイクルをトリガーしますので、$ scopeを使う必要はありません。主なものは、$scope.$emitを使用して、削除したいビデオの値を放出することです。あなたのケースでは、 https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit

ので： -

あなたは$に精通していない場合は（放出$の反対のあなたも$上から下にイベントを送信する放送をチェックすることができ）詳細については、これをチェック発します

： - データパラメータは、子コントローラからビデオオブジェクトを持つことになります

$scope.deleteVideo = function(video) { 
    $scope.$emit('deleteVideo', video); 
    }; 

そして、あなたのTutorialsControllerあなたはこれと同様の変更を聞く必要があります中：ようなあなたのVideoController何かに入れて

$scope.$on('deleteVideo', (event, data) => { 
    $scope.tutorial.videos = $scope.tutorial.videos.filter(video=>!angular.equals(video,data)); 
    }); 

これは$ scopeからビデオを削除するだけなので、$ httpロジックを追加する必要があります。

私はビデオオブジェクトごとにsomePropertyを追加しました。タイトルを表示するのにtitleを追加しました。現在、$ emit/$ broadcast経由でコントローラ間で簡単にやりとりする方法を示しています。

ここでフィドル上の簡単な例を示します：https://jsfiddle.net/pegla/d1rb96us/2/

また、私はこのトッドモットーのスタイルガイドをチェックすることをアドバイスし、コンポーネントベースのアーキテクチャを使用して開始します。現在、オンラインで最高のAngularJSスタイルのガイドです：https://github.com/toddmotto/angularjs-styleguide

希望します。 乾杯！