[英]$watch on rootscope not working, angular
I have a button which toggles admin and client mode. 我有一个切换管理员和客户端模式的按钮。 I've put it in on the rootscope so I can access it everywhere.
我把它放在了rootcope上,所以我可以随处访问它。
I'm using the angular-ui directive
for toggling. 我正在使用
angular-ui directive
进行切换。
I've put a watch on this model. 我已经看了这个型号。 But nothing is happening.
但什么都没发生。 Any idea what can be wrong?
知道什么可能是错的吗?
.run(['$rootScope', '$state', '$stateParams', '$location',
function ($rootScope, $state, $stateParams, $location) {
$rootScope.projectMode = 'Client';
$rootScope.$watch('projectMode', function(){
var path = $location.path();
alert("fire") //Only fire ones when the app starts
if($rootScope.projectMode === 'Client'){
var current = 'client'
var replace = 'admin'
} else {
var current = 'admin'
var replace = 'client'
}
var newUrl = path.replace(current, replace)
$location.url(newUrl);
})
}])
Here's my view. 这是我的看法。
<div class="btn-group">
<button type="button" class="btn btn-default" ng-model="projectMode" btn-radio="'Client'">Klient</button>
<button type="button" class="btn btn-default" ng-model="projectMode" btn-radio="'Admin'">Admin</button>
</div>
btn-radio
is the angular-ui directive for toggling. btn-radio
是用于切换的angular-ui指令。
I've checked that the $rootScope.projectMode
is changing. 我检查过
$rootScope.projectMode
正在改变。 So it must be something wrong with the $watch
. 因此,
$watch
一定有问题。
The real problem is that the projectMode
in your view is not the same projectMode
on the $rootScope
. 真正的问题是,
projectMode
在你看来是不一样的projectMode
在$rootScope
。 This is a common problem people have in Angular. 这是人们在Angular中遇到的常见问题。
Scopes in Angular are prototypical. Angular中的范围是典型的。 If a property isn't found in the current scope, then it looks for the property with the same name in that scope's parent, and so on until it reaches the
$rootScope
. 如果在当前作用域中找不到属性,则它会在该作用域的父级中查找具有相同名称的属性,依此类推,直到达到
$rootScope
。 So, when your view initializes, it may appear that projectMode
is whatever you initialized it to on $rootScope
. 因此,当您的视图初始化时,可能看起来
projectMode
是您在$rootScope
上初始化它的任何内容。
However, as soon as you change the value of projectMode
, it creates a new value on the controller's scope named projectMode
, which is not the same as $rootScope.projectMode
. 但是,只要更改
projectMode
的值,它就会在名为projectMode
的控制器作用域上创建一个新值,该值与$rootScope.projectMode
。 So, it makes sense that your $watch
isn't fired... The $rootScope
value isn't changing, only the controller scope's value is changing. 因此,有意义的是你的
$watch
没有被触发...... $rootScope
值没有改变,只有控制器范围的值正在改变。
If you'd like to fix it, simply change projectMode
to $root.projectMode
everywhere in your HTML. 如果您想修复它,只需将HTML中的
projectMode
更改为$root.projectMode
。 ( $root
inside HTML is how you reference $rootScope
.) (HTML中的
$root
是你引用$rootScope
。)
There's a little known third option for the $watch where it checks for object equality rather than object reference. $ watch有一个鲜为人知的第三个选项,它检查对象的相等性而不是对象引用。 Set that to true.
将其设置为true。 So try this,
试试这个,
$rootScope.$watch('projectMode', function(){
...your stuff here
}, true);
Try this - also I would recommend running JSLint 试试这个 - 我也建议运行JSLint
.run(['$rootScope', '$state', '$stateParams', '$location',
function ($rootScope, $state, $stateParams, $location) {
$rootScope.projectMode = 'Client';
var current = '';
var replace = '';
var newUrl = '';
var path = '';
$rootScope.$watch('projectMode', function(){
path = $location.path();
if($rootScope.projectMode === 'Client'){
current = 'client';
replace = 'admin';
}else{
current = 'client';
replace = 'admin';
}
newUrl = path.replace(current, replace);
$location.url(newUrl);
})
}])
I would also suggest using Angular's pub sub pattern and have a service watch for messages you could try using $rootScope.$broadcast and in your service $rootScope.$on and then change you location 我还建议使用Angular的pub子模式并为你可以尝试使用$ rootScope。$ broadcast和你的服务$ rootScope。$ on的邮件提供服务监视,然后更改你的位置
The Trick won't work for me - i had to apply the rootScope after changing the variable: Trick对我不起作用 - 我必须在更改变量后应用rootScope:
//Change rootScope-Varible to break
$rootScope.dbsynchstat = "break";
//Apply to Scope
$rootScope.$apply();
After that i can do something like that in any Controller i want to: 之后,我可以在任何我希望的控制器中执行类似的操作:
$rootScope.$watch('dbsynchstat', function(){
if($rootScope.dbsynchstat == 'break'){
init();
}
}, true);
Do not forget to add the $rootScope to you're controller. 不要忘记将$ rootScope添加到控制器中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.