将 ControllerAS 与 $scope 混合答案

【问题标题】：Mixing ControllerAS with $scope将 ControllerAS 与 $scope 混合
【发布时间】：2016-02-12 15:22:06
【问题描述】：

对于所有新工作，我使用ControllerAs 语法，以便在我的视图中将控制器称为vm。太棒了。

但是我仍然有很大一部分旧代码使用$scope 语法。特别是我的指令之一使用ng-click="groupClick"，它通常会在父控制器的$scope 上调用groupClick 函数。此视图是使用ContollerAs 语法构建的，因此不再起作用。

现有代码如下所示（简化）

<span>{{vm.somePropertyOnController}}</span>

<!-- This is provided by a template I cannot change -->
<a href="" ng-click="groupClick(item)">Test</a>

如何让<a>（通过我无法更改的模板提供）调用vm.groupClick。理想情况下，我不想将$scope 添加到我的控制器中，只是为了让groupClick 工作

我的控制器代码：

var vm = this;

vm.somePropertyOnController = "yay vm is cool";

// i really dont want to do this! dont make me!
$scope.groupClick = function (group) { console.log("test"); }

【问题讨论】：

好吧，vm.groupClick(item) 应该这样做。以这种方式将指令绑定到特定控制器是很丑陋的，但在作用域上已经是这样了。
可以，但我无法更改模板
那么你在作用域上调用一个函数，因此这个函数必须在作用域上。添加$scope.groupClick = function(item) {vm.groupClick(item);}

标签： angularjs angularjs-scope angularjs-controlleras

【解决方案1】：

更改您的 groupClick 功能：

vm.groupClick = groupClick

function groupClick() {
    console.log('test')
}

在视图中，您必须使用 controllerAs 语法：

<div ng-controller="controllerName as ctrl">
    <span>{{ctrl.somePropertyOnController}}</span>
    <a href="" ng-click="ctrl.groupClick(item)">Test</a>
</div>

【讨论】：

我无法更改模板（又名<a>），因为它在整个应用程序中被广泛使用，我现在没有时间进行此更改并进行全面回归