Question

我有两个控制器，一个嵌套在另一个控制器中。 ParentController有一个我在ChildController中使用的对象，因为它可以在child中直接使用。现在，在孩子，我正在调用$ http服务，然后更新此对象。我认为它应该更新视图。

我试过调用$ scope。$ apply（）保证成功函数，但我想我真的不明白如何使用这个。如何在不刷新页面的情况下更新DOM？

我还读到了在$ scope内调用$ http服务。$ apply（）。怎么做？

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

现在，在UI中，我使用的是TutorialsController，它负责添加Tutorial。我的意思是它是一个表单，它只适用于表单。然后是VideoController在本教程中显示视频。

{{1}}

当父级添加视频时，我想更新子级，当子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除非你绝对确定你需要它，大多数时候angular会触发你的摘要周期所以你不需要使用$ scope。$ apply。主要的是你可以使用$scope.$emit来发出你想要删除的视频的价值。

如果您不熟悉$ emit，请查看此更多详细信息（您还可以检查$ broadcast，它将从上到下发送事件 - 与$ emit相反）： https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit

因此，在您的情况下，请填写VideoController之类的内容：

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

在您的TutorialsController中，您需要收听与此类似的更改 - 数据参数将包含来自子控制器的视频对象：

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

以上内容只会删除$ scope中的视频 - 因此您需要添加$ http逻辑。

我简化了我在每个视频对象上添加someProperty的视频和用于显示标题的title，现在一切都只是为了展示如何通过$ emit /轻松地在控制器之间进行通信$广播。

以下是关于小提琴的简化示例：https://jsfiddle.net/pegla/d1rb96us/2/

另外，我建议您查看此Todd Motto的样式指南，并开始使用基于组件的架构。它是目前最好的在线AngularJS风格指南：https://github.com/toddmotto/angularjs-styleguide

希望它有所帮助。干杯！

$ http服务未更新视图

2 个答案: