2014-12-02 58 views
5

我正在开发具有可排序,可停靠,可浮动小部件的仪表板。我使用的一个控件在关闭body标记之前,在DOM的底部生成浮动窗口小部件作为HTML。这有效地消除了从控制器范围中生成的窗口控件中执行的操作。如何使用ControllerAs语法手动更新AngularJS视图?

我正在使用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?? 

回答

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

所以基本上你应该能够ŧ o请拨打this.$digestthis.$apply,正如您在$scope上所做的那样。

UPDATE

做一些搜索之后,我认为正确的解决办法应该使用$scope.apply()$scope.digest()

主要资源:
AngularJS’s Controller As and the vm Variable
a comment上升你同样的问题,笔者重播:

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

我发现其他资源:

+0

使用'变种vm = this;'然后'vm。$ digest();'导致错误:'对象不支持属性或方法'$ digest''。 – Blunderfest 2014-12-02 18:58:39

+1

在这种情况下,我认为你需要使用'$ scope。$ digest()'或'$ scope。$ apply()'。看看[这篇文章](http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/),它解释了“$ scope”注入 – pasine 2014-12-02 19:44:28

+0

我之前阅读过这篇文章,并且我认为它特别提到了$ scope的注入方式,以引用手表或广播,这让我认为可能有一种方法可以在没有范围的情况下应用更新。无论如何,应该是。 – Blunderfest 2014-12-02 19:49:34

0

尝试做在$范围的更新$应用块这样的:

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

为了避免“文摘已在进行中”错误,换在$timeout

相关问题