我有一个根状态,用于定义Angular模板的整体结构。在根状态下,我有侧边栏包含动态菜单通过指令根据状态更改。像这样:
.state(‘root', {
abstract: true,
url: ‘/root',
templateUrl: ‘views/root.html',
})
root.html
包含sidebar.html
,其中包含通过Directive调用的动态菜单,如下所示:
sidebar.html
<ul class="nav" id="side-menu">
<li class="nav-header">
<img alt="avatar" ng-src="{{ avatar }}" />
</li>
<!—Dynamic Menus Directive -->
<li sidebar-menus></li>
</ul>
该指令显示基于$state.includes()
的菜单。但是发生的情况是,该指令在第一次加载时显示正常但在状态更改期间不会更新指令。为了解决这个问题,我尝试了以下方法但没有任何效果:
$state
到scope
,但它仍然不会更改指令
一旦编译完成。 $stateChangeSuccess
观察者来触发重新编译指令,但事实并非如此
第一次重新编译后(或)可能重新编译但是模板中没有看到更改(这是我现在的代码)
我将在下面给出)。 我不确定如何处理这个问题。我有一种感觉,我的方法可能不合时宜,并希望有人可以在这里指导我。这是我目前的指令代码:
.directive('sidebarMenus', ['$compile', '$state', '$rootScope',
function($compile, $state, $rootScope) {
return {
restrict: 'A',
replace: true,
link: function(scope, element, attrs) {
var state = scope.$state; // Scope from Main Controller
// HTML Template
function contructHtml(state) {
var htmlText = '';
// First Child State
if (state.includes('root.child1')) {
var htmlText = '<li>Child 1 Menu</li>';
}
// Second Child State
if (state.includes('root.child2')) {
var htmlText = '<li>Child 2 Menu</li>';
}
// Third Child State
if (state.includes('root.child3')) {
var htmlText = '<li>Child 3 Menu</li>';
}
$compile(htmlText)(scope, function( _element, _scope) {
element.replaceWith(_element);
});
}
$rootScope.$on('$stateChangeSuccess', function() {
var state = scope.$state; // scope.$state is added in main controller
contructHtml(state);
});
// Initial Load
contructHtml(state);
}
}
}])
答案 0 :(得分:3)
您可以使用模板摆脱编译业务。 你的模板看起来像这样:
append
所以你的指令代码看起来应该像这样
<li ng-if="state.includes('root.child1')">Child 1 Menu</li>
<li ng-if="state.includes('root.child2')">Child 2 Menu</li>
<li ng-if="state.includes('root.child3')">Child 3 Menu</li>