Javascript 模板未更新,是否需要使用$rootScope.$apply或其他工具?
我正在制作一个连接到集群的web应用程序,因此99%的时候,我的URL都是这样的:Javascript 模板未更新,是否需要使用$rootScope.$apply或其他工具?,javascript,angularjs,Javascript,Angularjs,我正在制作一个连接到集群的web应用程序,因此99%的时候,我的URL都是这样的:/cluster/cluster\u name/something/else。由于路由是动态的,我需要在导航栏中动态生成ng href 现在,我有一个解析URL并将其传递给索引模板的服务: app.factory('GetCluster',function($location) { return { cluster: {name: $location.path().split('/')[2]} };
/cluster/cluster\u name/something/else
。由于路由是动态的,我需要在导航栏中动态生成ng href
现在,我有一个解析URL并将其传递给索引模板的服务:
app.factory('GetCluster',function($location) {
return {
cluster: {name: $location.path().split('/')[2]}
};
});
<div class="sidebar-nav navbar-collapse" ng-controller="NavigationController">
<div ng-if="cluster">
<ul class="nav" id="side-menu">
<li><a ng-class="{ active: isActive('/') }" ng-href="/#!/"><i class="fa fa-home"></i> Home</a></li>
<li><a ng-class="{ active: isActive('/cluster/' + cluster) }" ng-href="/#!/cluster/{{ cluster }}"><i class="fa fa-sitemap"></i> Cluster</a></li>
<li><a ng-class="{ active: isActive('/cluster/' + cluster + '/nodes') }" ng-href="/#!/cluster/{{ cluster }}/nodes"><i class="fa fa-hdd-o"></i> Nodes</a></li>
<li><a ng-class="{ active: isActive('/cluster/' + cluster + '/namespaces') }" ng-href="/#!/cluster/{{ cluster }}/namespaces"><i class="fa fa-database"></i> Namespaces</a></li>
<li><a ng-class="{ active: isActive('/cluster/' + cluster + '/views') }" ng-href="/#!/cluster/{{ cluster }}/views"><i class="fa fa-search"></i> Views</a></li>
<li><a ng-class="{ active: isActive('/cluster/' + cluster + '/tasks') }" ng-href="/#!/cluster/{{ cluster }}/tasks"><i class="fa fa-tasks"></i> Tasks</a></li>
</ul>
</div>
<div ng-if="!cluster">
<ul class="nav" id="side-menu">
<li><a ng-class="{ active: isActive('/')}" ng-href="/#!/"><i class="fa fa-home"></i> Home</a></li>
</ul>
</div>
然后在导航控制器中,我有:
function NavigationController($scope, $location, GetCluster) {
$scope.cluster = GetCluster.cluster.name;
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path()
}
最后在模板中:
app.factory('GetCluster',function($location) {
return {
cluster: {name: $location.path().split('/')[2]}
};
});
<div class="sidebar-nav navbar-collapse" ng-controller="NavigationController">
<div ng-if="cluster">
<ul class="nav" id="side-menu">
<li><a ng-class="{ active: isActive('/') }" ng-href="/#!/"><i class="fa fa-home"></i> Home</a></li>
<li><a ng-class="{ active: isActive('/cluster/' + cluster) }" ng-href="/#!/cluster/{{ cluster }}"><i class="fa fa-sitemap"></i> Cluster</a></li>
<li><a ng-class="{ active: isActive('/cluster/' + cluster + '/nodes') }" ng-href="/#!/cluster/{{ cluster }}/nodes"><i class="fa fa-hdd-o"></i> Nodes</a></li>
<li><a ng-class="{ active: isActive('/cluster/' + cluster + '/namespaces') }" ng-href="/#!/cluster/{{ cluster }}/namespaces"><i class="fa fa-database"></i> Namespaces</a></li>
<li><a ng-class="{ active: isActive('/cluster/' + cluster + '/views') }" ng-href="/#!/cluster/{{ cluster }}/views"><i class="fa fa-search"></i> Views</a></li>
<li><a ng-class="{ active: isActive('/cluster/' + cluster + '/tasks') }" ng-href="/#!/cluster/{{ cluster }}/tasks"><i class="fa fa-tasks"></i> Tasks</a></li>
</ul>
</div>
<div ng-if="!cluster">
<ul class="nav" id="side-menu">
<li><a ng-class="{ active: isActive('/')}" ng-href="/#!/"><i class="fa fa-home"></i> Home</a></li>
</ul>
</div>
这是可行的,但是如果我切换到另一个集群,ng href仍然指向旧集群。我必须刷新浏览器中的页面才能显示正确的链接
我已尝试将服务返回包装到$rootScope.$apply()
中,但没有成功。它将出现类似于$digest的错误,该错误已在进行中
我如何解决这个问题
谢谢,请尝试以下服务:
app.factory('GetCluster',function($location) {
return {
cluster: function() {
var path = $location.path().split('/');
return path[2];
}
}
});
然后调用控制器中的群集功能:
$scope.cluster = GetCluster.cluster();
如果需要,也可以将路径位置作为参数传递给服务返回。角度服务是单例的,因此只能使用一次。但是,您可以从服务返回一个函数并在控制器中调用该函数谢谢您的回答,但它仍然不会更新。导航栏在ng视图之外,这会改变什么吗?不,这不重要。你能提供一把小提琴吗?