如何将MenuController在SinglePage AngularJS应用程序中与主页集成
如何将MenuController在SinglePage AngularJS应用程序中与主页集成
提问于 2014-07-04 12:39:52
在我的角应用程序中，我在index.html中有以下代码：
<!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
<title>AngularJS</title>
<!-- load css ... -->
</head>
<body>
<!-- My menu bar -->
<nav ng-controller="MenuCtrl">
<ul>
<span ng-repeat="action in actions">
<li><a href="{{action.href}}">{{action.name}}</a></li>
</span>
</ul>
</nav>
<div class="container" ng-view>
<!-- content -->
</div>
<!-- load Angular Library -->
<!-- load services -->
<!-- load controllers -->
</body>
</html>内容从部分html文件中加载。
但是现在，我想添加一个没有菜单控制器的登录页面。当用户未连接时，不应显示<nav>条。
如何在不重复每个部分html文件中的代码的情况下将我的<nav>条与MenuCtrl放在一起？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-07-04 13:13:50
您可以通过使用factory来利用角的依赖注入
检查一下这个柱塞
js
app.factory('ShareObject', function() {
var ShareObject = function(){};
return ShareObject;
});
app.controller('MenuCtrl', function($scope, ShareObject) {
$scope.share = ShareObject;
$scope.login = function() {
// Go to backend and login,
// ...
$scope.share.user = {
username: 'julien_dumortier',
name: 'Julien Dumortier'
};
};
$scope.logout = function() {
// Go to backend and logout,
// ...
$scope.share.user = null;
};
});
app.controller('mainController', function($scope, ShareObject) {
$scope.share = ShareObject;
});html
<!-- My menu bar -->
<nav ng-controller="MenuCtrl">
<div ng-show="share.user" >
Logged in as {{ share.user.username }}
<a ng-click="logout()">logout</a>
</div>
<a ng-show="!share.user" ng-click="login()">login</a>
</nav>
<div class="container" ng-view></div>视图
<h2>Home</h2>
Logged in as {{ share.user.username }} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24574571
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号