有两种模式用于访问控制器函数:this和$scope。
我应该什么时候用哪种?我知道这是设置为控制器和$scope是视图作用域链中的对象。但是有了新的“Controller as Var”语法,你可以很容易地使用其中任何一种。所以我的问题是什么是最好的,未来的方向是什么?
例子:
使用这个
函数UserCtrl() {
这一点。Bye = function() {alert('....');};
}
<body ng-controller='UserCtrl as uCtrl'>
<按钮ng-click = ' uCtrl.bye() >再见> < /按钮
使用美元的范围
函数UserCtrl($scope) {
美元的范围。Bye = function () {alert('....');};
}
<身体ng-controller = ' UserCtrl ' >
<按钮ng-click = '再见()' >再见> < /按钮
我个人认为,与其他Javascript OO模式相比,this.name更容易理解,也更自然。
建议好吗?
两者都有各自的用途。首先,一些历史……
$scope是“经典”技术,而“controller as”则是最近才出现的技术(官方版本为1.2.0,尽管在此之前它确实出现在不稳定的预发布版中)。
两者都运行得非常好,唯一的错误答案是在没有明确理由的情况下将它们混合在同一个应用程序中。坦率地说,把它们混在一起是可行的,但只会增加混乱。那就选一个吧。最重要的是始终如一。
哪一个?这取决于你。还有很多关于$scope的例子,但是“controller as”也越来越流行。一个比另一个好吗?这是有争议的。那么该如何选择呢?
安慰
我更喜欢“controller as”,因为我喜欢隐藏$作用域,并通过中间对象将控制器的成员暴露给视图。通过设置这个。*,我可以从控制器向视图公开我想要公开的内容。你也可以用$scope这样做,我只是更喜欢使用标准的JavaScript。事实上,我是这样编码的:
var vm = this;
vm.title = 'some title';
vm.saveData = function(){ ... } ;
return vm;
这对我来说感觉更干净,更容易看到被暴露在视图中的东西。注意,我将返回的变量命名为“vm”,它代表viewmodel。这只是我的惯例。
使用$scope,我可以做同样的事情,所以我没有使用该技术进行增加或减少。
$scope.title = 'some title';
$scope.saveData = function() { ... };
所以这取决于你。
注射
对于$scope,我确实需要将$scope注入到控制器中。我不必在控制器as中这样做,除非我出于其他原因需要它(如$broadcast或watches,尽管我尽量避免在控制器中使用手表)。
更新
我写了这篇关于这两个选择的文章:
http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/
我喜欢组合。
在用一些模拟数据填充它们之后,一个简单的console.log的$scope和'this'将显示这一点。
$scope允许访问控制器的隐藏部分,例如:
$$ChildScope: null;
$$childHead: null;
$$childTail: null;
$$listenerCount: Object;
$$listeners: Object;
$$nextSibling: Scope;
$$prevSibling: null;
$$watchers: null;
$$watcherCount: 0;
$id: 2;
$parent: Object;
foo: 'bar';
** Angular团队不建议使用$$的属性和方法,但是$可以安全地使用$parent和$id来做一些很酷的事情。
“this”直奔主题,附加2向绑定的数据和函数。你只会看到你附上的东西:
foo: 'bar';
那么为什么我更喜欢一种组合呢?
在ui-router嵌套的应用程序中,我可以访问主控制器,设置和调用子控制器中的通用值和函数:
在主控制器中:
// Main Controller
var mainCtrl = this;
mainCtrl.foo = 'Parent at the bar';
在子控制器中:
// Child Controller
var mainCtrl = $scope.$parent.mainCtrl;
var childCtrl = this;
// update the parent from within the child
childCtrl.underageDrinking = function(){
mainCtrl.foo = 'Child at the bar';
}
// And then attach the child back to a property on the parent controller!
mainCtrl.currentCtrl = childCtrl;
现在,您可以从子对象中访问父对象,从父对象中访问子对象!