如何更新状态变更指令

时间:2015-11-19 14:52:04

标签: angularjs angularjs-scope angularjs-controller angular-directive

我有一个根状态,用于定义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()的菜单。但是发生的情况是,该指令在第一次加载时显示正常但在状态更改期间不会更新指令。为了解决这个问题,我尝试了以下方法但没有任何效果:

  1. 在主控制器中添加$statescope,但它仍然不会更改指令 一旦编译完成。
  2. 尝试添加$stateChangeSuccess观察者来触发重新编译指令,但事实并非如此 第一次重新编译后(或)可能重新编译但是模板中没有看到更改(这是我现在的代码) 我将在下面给出)。
  3. 将侧边栏移到单独的孩子中 国家而不是在根州工作,但它击败了 目的,因为我试图加载根中的整体结构 首先是状态,只在后续状态下刷新菜单部分 变化。
  4. 我不确定如何处理这个问题。我有一种感觉,我的方法可能不合时宜,并希望有人可以在这里指导我。这是我目前的指令代码:

    .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);
            }
        }
    }])
    

1 个答案:

答案 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>