javascript 如何使用 ControllerAs 语法手动更新 AngularJS 视图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27256136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to manually update AngularJS view using ControllerAs syntax?
提问by Blunderfest
I'm developing a dashboard with sortable, dockable, floatable widgets. One of the controls I'm using generates the floating widgets as HTML at the bottom of the DOM, before the closing bodytag. This effectively removes actions done in the window controls from the controller scope they are generated in.
我正在开发一个带有可排序、可停靠、可浮动小部件的仪表板。我正在使用的控件之一在 DOM 底部，在结束body标记之前生成浮动小部件作为 HTML 。这有效地从生成它们的控制器范围中删除了在窗口控件中完成的操作。
I'm developing this dashboard controller using controllerAssyntax available, but I can't figure out how to effectively update the view with this syntax when an external component does an action that affects the data for the view?
我正在使用controllerAs可用的语法开发此仪表板控制器，但是当外部组件执行影响视图数据的操作时，我无法弄清楚如何使用此语法有效更新视图？
Note: This is not the only I'm facing that forces me to manually update the main view. There are also directives elsewhere on the page that perform actions that impact the view.
注意：这并不是我面临的唯一迫使我手动更新主视图的问题。页面上的其他地方也有执行影响视图的操作的指令。
Ideally, I would never have to update the view manually, because I would be using all commands that happen within the built in Angular commands affecting digest loop - but this was not an option for me.
理想情况下，我永远不必手动更新视图，因为我将使用影响摘要循环的内置 Angular 命令中发生的所有命令 - 但这对我来说不是一个选择。
So... if I was using $scopeI would be able to simply do:
所以......如果我正在使用$scope我将能够简单地做：
$scope.$digest
Or
或者
$scope.$apply
But how do I achieve the same affect using controller as?
但是如何使用控制器实现相同的效果？
var vm = this;
vm.array = [item, item];
vm.something = something;
//External something changes something on a vm.variable
vm.update! //How??
采纳答案by pasine
With 'as' you are defining the way you will refer to your controller scope in you view.
使用“as”，您可以定义在视图中引用控制器范围的方式。
So this:
所以这：
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
Is equal to this:
等于这个：
<body ng-controller="MainCtrl as main">
<p>Hello {{main.name}}!</p>
</body>
Your controller:
您的控制器：
app.controller('MainCtrl', function($scope) {
this.name = 'World';
});
So basically you should be able to call this.$digestor this.$applyas you would do on $scope.
所以基本上你应该能够打电话this.$digest或this.$apply像你会做的那样$scope。
UPDATE
更新
After doing some search, I think the correct solution should be using $scope.apply()or $scope.digest().
经过一番搜索，我认为正确的解决方案应该是使用$scope.apply()or $scope.digest()。
Main resource:
AngularJS's Controller As and the vm Variable
There is a commentrising your same question and the author replay:
主要资源：
AngularJS 的 Controller As 和 vm 变量
有一条评论提出了您同样的问题，作者重播：
You can use $scope.$apply() in that case and just inject $scope for that purpose (still using vm for everything else). However, if you switch fro using ajax to using Angular's $http, then you won't need to call $apply as angular's $http does that for you. That's what I recommend
在这种情况下，您可以使用 $scope.$apply() 并为此目的注入 $scope （仍然使用 vm 进行其他所有操作）。但是，如果您从使用 ajax 切换到使用 Angular 的 $http，那么您将不需要调用 $apply，因为 angular 的 $http 会为您执行此操作。这就是我推荐的
Other resources I found:
我发现的其他资源：
回答by Frane Poljak
Try to do your update in $scope.$apply block like this:
尝试在 $scope.$apply 块中进行更新，如下所示：
$scope.apply(function() {
vm.something = some_new_value;
});
To avoid "Digest already in progress" error, wrap that in $timeout
为避免“摘要已经在进行中”错误，请将其包装在 $timeout
