[英]AngularJS using $watch in controllers
So I have been reading this article which suggests using $watch in your controllers is bad. 因此,我一直在阅读本文 ,这表明在控制器中使用$ watch是不好的。 I am trying to take the advice.
我正在尝试接受建议。 I have controller that looks like this:
我有看起来像这样的控制器:
.controller('NavigationController', ['$rootScope', '$scope', function ($rootScope, $scope) {
var self = this;
// Get our current user
self.user = $rootScope.user;
// Watch
$scope.$watch(function () {
// Return our user
return $rootScope.user;
}, function (user) {
// Set our user to the new user
self.user = user;
});
}]);
and my HTML looks like this: 我的HTML看起来像这样:
<div class="account-header" ng-controller="NavigationController as controller" ng-cloak ng-show="controller.user.authenticated">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-account">
<div class="collapse navbar-collapse" id="account-menu">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>{{ controller.user.userName }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="teams">Team settings</a></li>
<li><a ui-sref="account">Account settings</a></li>
<li><a ui-sref="logout">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
You can see that I am only showing the account menu when the user is logged in. After reading the article, I am struggling to see how I can actually change my controller. 您可以看到我仅在用户登录后才显示帐户菜单 。在阅读了这篇文章之后,我正在努力查看如何实际更改控制器。
Does anyone have any suggestions? 有没有人有什么建议?
Update 1 更新1
Some of you have said because it is in the rootscope, I don't have to do anything. 你们中有些人说过,因为它在rootscope中,所以我不需要做任何事情。 I can just use user in the HTML and it should work fine.
我可以在HTML中使用用户,它应该可以正常工作。 I tested this like this:
我这样测试:
<div class="account-header" ng-cloak ng-show="user.authenticated">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-account">
<div class="collapse navbar-collapse" id="account-menu">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>{{ user.userName }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="teams">Team settings</a></li>
<li><a ui-sref="account">Account settings</a></li>
<li><a ui-sref="logout">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
and it did work. 它确实起作用。 Now what I want to do is add another menu item, this item is only shown if there are any kits.
现在,我要做的是添加另一个菜单项,仅当有任何套件时才显示此菜单项。 But I would rather not do a API call on every state change, so the only thing I can see is to amend something when a kit is either added or deleted.
但是我宁愿不对每个状态更改进行API调用,所以我唯一能看到的就是在添加或删除工具包时对某些内容进行修改。 But I am not sure what is the best way to do this.
但是我不确定什么是最好的方法。
When the user changes broadcast a 'userLoggin' event on the $rootScope. 当用户更改时,在$ rootScope上广播一个'userLoggin'事件。 Then listen for that event in your controller.
然后在您的控制器中监听该事件。
Or $emit the event on $rootScope and in the controller listen on the $rootScope by injecting it. 或$ emit在$ rootScope上的事件,然后在控制器中通过注入事件来监听$ rootScope。
$rootScope.$on('userLoggin' function() {
// React to user change.
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.