我正在编写一个客户端角度应用程序,我有一个与我可以使用角度ng-template
的方式相关的问题。
所以,我有navbar
:
<nav class="navbar navbar-inverse" >
<div class="container-fluid">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<!--<li class="active"><a href="#">Home</a></li>-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Events <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Create Event</a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" ng-include="getTemplate()">
</ul>
</div>
</div>
</nav>
好的,在上一个<ul>
标记中我使用了ng-include="getTemplate()"
,其中getTemplate就是这个函数:
<script type="text/javascript">
$(function () {
var getTemplate = function () {
return "notauth";
}
})
</script>
基本上,这将返回相同的模板,但我只是想在我添加更多逻辑之前使用它。
&#34; notauth&#34;模板是:
<script type="text/ng-template" id="notauth">
<li><a ui-sref="signup"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a ui-sref="login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</script>
请注意,这是在我的index.html页面内,因为我希望我的导航栏对所有视图都相同,但是根据用户状态更改其模板:如果用户登录使用auth模板,否则使用notauth模板。
问题是这不起作用,我无法弄清问题是什么。
答案 0 :(得分:3)
使用$ scope声明函数,如下所示:
$scope.getTemplate = function () {
return "notauth" ;
console.log("notauth")
}
然后你可以这样打电话:
<ul class="nav navbar-nav navbar-right" ng-include="getTemplate()">
这是正常的。
答案 1 :(得分:1)
你的函数不起作用的原因是你在一个函数中定义你的函数(由jQuery自动调用),因此只能在该函数的范围内使用。
但即使您要将getTemplate()
添加到全局(窗口)范围,它仍然无法正常工作,因为Angular会在当前$scope
对象上查找它。
所以你能做到这一点的唯一方法就是:
<ul class="nav navbar-nav navbar-right" ng-include="getTemplate()">
如果你以某种方式将getTemplate()
传递到当前$scope
或$rootScope
。这可以通过例如以下代码来实现:
angular.module('myApplication', [])
.run(['$rootScope', function($rootScope) {
$rootScope.getTemplate = function() {
return 'notauth';
};
}]);
请注意,虽然这样的事情可能有效,但您可以更好地为此功能创建一个组件,然后可以拥有一个可以实际执行智能逻辑的可注射控制器。
答案 2 :(得分:0)
ng-include="'notauth'"
的作用与此类似,不是ng-include="notauth"
所以,尝试做那样的事情。
<script type="text/javascript" >
angular.module('app', []).
controller('MainC', function($scope){
$scope.call = function(){
return 'notauth';
}
})
</script>