Angular.js“控制器作为......"+ $scope.$on [英] Angular.js "Controller as ..." + $scope.$on
问题描述
如果我想在 Angular 中使用Controller as ..."语法,我应该如何处理像 $scope.$on(...) 这样我需要放入控制器的东西?
我有一种印象,我可以用下面所示的其他方式来做到这一点.在这里,为了让 $scope.$ 工作,我将this"绑定到回调函数.我试图在控制器内部的this"上调用 $on ,但没有用.
你能在这里给我一个提示,或者如果我完全搞砸了,你能指出一些正确的方法吗?谢谢.
main.js:
angular.module('ramaApp').controller('MainCtrl', ['$scope', '$location', function ($scope, $location) {this.whereAmINow = 'INDEX';$scope.$on('$locationChangeStart', function(event) {this.whereAmINow = $location.path();}.bind(this));this.jumpTo = function(where) { $location.path(where);}}]);
index.html:
<p>我看到的幻灯片名为:{{ main.whereAmINow }}</p><div ng-click="main.jumpTo('/slide1')">幻灯片 1</div><div ng-click="main.jumpTo('/slide2')">幻灯片 2</div><div ng-click="main.jumpTo('/slide3')">幻灯片 3</div>
据我所知,如果你想要 $scope 观察者/方法,你需要注入 $scope.ControllerAs 只是一种语法糖,可以让您更清楚地看到嵌套控制器的结构.
三个想法可以简化您的代码.
使用var vm = this,为了摆脱bind(this).
var vm = this;vm.whereAmINow = "/";$scope.$on('$locationChangeStart', function(event) {vm.whereAmINow = $location.path();});vm.jumpTo = 函数(其中){$location.path(where);}
整个 whereamINow 变量将其放入应用程序 aka .run() 的初始化(在配置之前)是有意义的,因为我认为它是一个全局变量,您不需要使用 $scope 观察者/方法
另一种选择是使用工厂来使更改保持不变,因此您只需创建一个包含当前活动路径的位置工厂.
If i'd like to use the "Controller as ..." syntax in Angular, how should I approach things like $scope.$on(...) that i need to put inside the controller?
I get an impression i could do it some other way than the one shown below. Here, to get $scope.$on working i bind "this" to the callback function. I tried to invoke $on on "this" inside the controller but it didn't work.
Could you give me a hint here or if i'm completely messing up, could you point me to some right way to do it? Thanks.
main.js:
angular.module('ramaApp')
.controller('MainCtrl', ['$scope', '$location', function ($scope, $location) {
this.whereAmINow = 'INDEX';
$scope.$on('$locationChangeStart', function(event) {
this.whereAmINow = $location.path();
}.bind(this));
this.jumpTo = function(where) { $location.path(where); }
}]);
index.html:
<div ng-controller="MainCtrl as main">
<p>I am seeing the slide named: {{ main.whereAmINow }}</p>
<div ng-click="main.jumpTo('/slide1')">Slide 1</div>
<div ng-click="main.jumpTo('/slide2')">Slide 2</div>
<div ng-click="main.jumpTo('/slide3')">Slide 3</div>
</div>
As far as I know, you need to inject $scope if you want $scope watchers/methods. ControllerAs is just syntactic sugar to enable to see more clearly the structure of your nested controllers.
Three ideas though which may simplify your code.
Use var vm = this, in order to get rid of the bind(this).
var vm = this; vm.whereAmINow = "/"; $scope.$on('$locationChangeStart', function(event) { vm.whereAmINow = $location.path(); }); vm.jumpTo = function(where) { $location.path(where); }
The whole whereamINow variable makes sense putting it into the initialization of app aka .run() (before config) since I assume it's a global variable and you don't need to use a $scope watcher/method for it.
Another option is to use a factory to make the changes persist, so you simply create a location factory which holds the current active path.
这篇关于Angular.js“控制器作为......"+ $scope.$on的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!