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

时间:2014-12-02 18:11:09

标签: javascript angularjs

我正在开发一个带有可排序,可停靠,可浮动的小部件的仪表板。我正在使用的其中一个控件在结束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??

2 个答案:

答案 0 :(得分:6)

使用'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';
});

DEMO

所以基本上你应该可以像this.$digest那样拨打this.$apply$scope

<强>更新

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

主要资源:
AngularJS’s Controller As and the vm Variable
a comment提出了同样的问题,作者重播:

  

在这种情况下,你可以使用$ scope。$ apply()并注入$ scope   那个目的(仍然使用vm用于其他一切)。但是,如果你   使用ajax切换到使用Angular的$ http,然后你就不需要了   调用$ apply作为angular的$ http为你做。这就是我   建议

我找到的其他资源:

答案 1 :(得分:0)

尝试在$ scope。$ apply block中进行更新,如下所示:

$scope.apply(function() {
    vm.something = some_new_value;
});

要避免&#34;摘要已经在进行中&#34;错误,将其包装在$timeout