Question

我有一个根状态，用于定义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);
        }
    }
}])

Answer 1

您可以使用模板摆脱编译业务。你的模板看起来像这样：

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>

如何更新状态变更指令

1 个答案: