Javascript 在angularjs中绑定不刷新
我正在使用AngularJS,我需要您的帮助,在用户登录后更新HTML的内容。 事实上,当我加载页面时,HTML只加载控制器一次,这意味着当用户尚未登录时。但是在登录后HTML没有刷新页面,显示用户的登录?我怎样才能解决这个问题。 下面是我的HTMLJavascript 在angularjs中绑定不刷新,javascript,html,angularjs,Javascript,Html,Angularjs,我正在使用AngularJS,我需要您的帮助,在用户登录后更新HTML的内容。 事实上,当我加载页面时,HTML只加载控制器一次,这意味着当用户尚未登录时。但是在登录后HTML没有刷新页面,显示用户的登录?我怎样才能解决这个问题。 下面是我的HTML <section class="hero hero-1 hero-small" ng-controller="HomeController"> <header class="navbar" role="navigatio
<section class="hero hero-1 hero-small" ng-controller="HomeController">
<header class="navbar" role="navigation">
<div class="container" ng-controller="UserController">
{{username}}
<nav>
<a class="navbar--logo" ui-sref="home">EspritAcademy</a>
</nav>
<nav>
<ul class="navbar--list pull-right">
<li class="navbar--list-item"><a ui-sref="#">Features</a></li>
<li class="navbar--list-item"><a ui-sref="#">Courses</a></li>
<li class="navbar--list-item" ng-hide="isLoggedIn()"><a
ui-sref="login">Sign in</a></li>
<li class="navbar--list-item dropdown"
ng-controller="DropdownCtrl" dropdown is-open="status.isopen"
ng-show="isLoggedIn()"><a ui-sref="#"
class="dropdown-toggle" data-toggle="dropdown" dropdown-toggle
ng-disabled="disabled"> <b>{{username}}</b><b class="caret"></b>
</a>
<ul class="dropdown-menu" style="left: inherit; right: 0;">
<li><a ui-sref="#">My Profile</a></li>
<li><a ui-sref="#">Account Settings</a></li>
<li ng-click="logout()"><a ui-sref="home">Logout</a></li>
</ul></li>
<!-- <li class="navbar--list-item" ng-click="logout()"
ng-show="isLoggedIn()"><a ui-sref="home">Déconnexion</a></li> -->
<li class="navbar--list-item" ng-hide="isLoggedIn()"><a
class="rounded-button blue-button" ui-sref="register">Start
learning</a></li>
</ul>
</nav>
</div>
</header>
</section>
我面临的问题是{{username}的显示。
下面是使用rest技术和Java后端获取用户详细信息的工厂
factory(
'accountService',
function($resource, sessionService) {
var service = {};
service.register = function(account, profile, success,
failure) {
if (profile.id == 1) {
var Account = $resource("/rest/account");
Account.save({}, account, success, failure);
} else {
var Account = $resource("/rest/account/teacher");
Account.save({}, account, success, failure);
}
};
service.userExists = function(account, success, failure) {
var Account = $resource("/rest/account");
var data = Account.get({
username : account.username,
password : account.password
}, function() {
console.log("user details : ", data);
var accounts = data.username;
if (accounts && accounts.length !== 0) {
console
.log("profile id :",
data.userProfile.id);
service.data = data;
success(account);
} else {
failure();
}
}, failure);
};
service.getuser = function() {
return service.data;
};
return service;
})
我不需要不断刷新我的页面,我只需要在用户登录后加载UserController。使用ng if或其他方式是否可能?因为getuser()
总是返回一个对象请尝试以下操作
function HomeController($scope, accountService) {
//will always be object but may not have `username` property
$scope.loggedUser = accountService.getuser();
}
然后在标记中使用
{{loggedUser.username}}
因此,现在当
用户名
属性在您的服务中得到更新时,它将一直绑定到视图我认为您必须仅在用户登录时实例化用户控制器,目前情况并非如此
试着改变这个
<div class="container" ng-controller="UserController">
对此
<div class="container" ng-controller="UserController" ng-if="isLoggedIn()">
请显示accountService.getuser()
code。您的if(loggedUser)
导致了问题,但有助于查看什么是getuser()
returns@charlietfl我不认为这个问题可能与accoutService.getuser有关,因为我可以在登录后加载的其他屏幕中使用相同的控制器显示用户名,但如果它没有返回带有用户名的对象,则只设置$scope.username
,这是肯定的财产。然后,当您在
getuser()`中更新对象时,中没有可绑定的对象controller@charlietfl这就是问题所在,实际上我需要做的是告诉HTML仅在用户登录时加载usercontroller,否则$scope.username将始终为空。如果要删除HTML,可以使用ng,或指令或ng include
。很多方法都是一样的,我面临的问题是,当我加载页面时,用户还没有登录,因此loggedUser变量将为空,这意味着{{loggedUser.username}}也将为空,并且在用户登录后不会更新。oops更改此var service={data:'}代码>。我误读了同样的东西:(它不会在登录后更新显示。如果您遵循我的方法并且getuser返回一个对象,应该创建一个plunker演示,并使用$timeout
作为延迟来模拟loginlet me给您提供更多详细信息。您会看到UserController中带有if条件的块,即使loggeduser不是空的,它也不会被验证在我的控制台中显示hello,但它从不显示用户名:user1,例如,控制器中的第二个console.log,这就是我试图解决的问题,为什么if条件后的查询从未执行。是的:)ca marche:)谢谢Haykel,我在controller中使用了if条件,我认为当用户名为空时不会有问题,但是使用ng if只会在条件被验证时填充该var。我还更新了HTML代码以获得正确的显示:)再次感谢@Haykel Ben Jemia
<div class="container" ng-controller="UserController" ng-if="isLoggedIn()">