如何使用ControllerAs语法手动更新AngularJS视图？

Question

我正在开发一个带有可排序,可停靠,可浮动的小部件的仪表板.我正在使用的一个控件在结束body标记之前在DOM的底部生成浮动小部件作为HTML .这有效地从窗口控件中生成的控制器范围中删除了窗口控件中执行的操作.

我正在使用controllerAs可用的语法开发此仪表板控制器,但是当外部组件执行影响视图数据的操作时,我无法弄清楚如何使用此语法有效地更新视图？

注意:这不是我面临的唯一迫使我手动更新主视图的方法.页面上的其他地方也有指令执行影响视图的操作.

理想情况下,我永远不必手动更新视图,因为我将使用内置的Angular命令中发生的所有命令来影响摘要循环 - 但这对我来说不是一个选项.

所以......如果我使用的话,我$scope可以简单地做到:

$scope.$digest

要么

$scope.$apply

但是如何使用控制器实现相同的效果呢？

var vm = this;
vm.array = [item, item];
vm.something = something;

//External something changes something on a vm.variable

vm.update! //How??

Answer 1

使用'as',您可以定义在视图中引用控制器范围的方式.

所以这:

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
</body>

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

等于这个:

<body ng-controller="MainCtrl as main">
  <p>Hello {{main.name}}!</p>
</body>

你的控制器:

app.controller('MainCtrl', function($scope) {
  this.name = 'World';
});

所以基本上你应该可以打电话this.$digest或者this.$apply像你一样打电话$scope.

UPDATE

在做了一些搜索后,我认为正确的解决方案应该是使用$scope.apply()或$scope.digest().

主要资源:
AngularJS的Controller As和vm变量
有一个评论提出同样的问题和作者重播:

在这种情况下,您可以使用$ scope.$ apply()并为此目的注入$ scope(仍然使用vm用于其他所有内容).但是,如果你使用ajax切换到使用Angular的$ http,那么你就不需要调用$ apply,因为angular的$ http会为你做这件事.这就是我推荐的

我找到的其他资源:

我认为在这种情况下你需要使用 `$scope.$digest()` 或 `$scope.$apply()`。看看[这篇文章](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/)，它解释了`$scope`注入 (3认同)