Question

我正在尝试编写一个导航菜单，根据指定网址中的路径隐藏/显示信息。

到目前为止，我有以下内容：

.directive( "jkSection", function( $routeParams, $location ){

        var linker = function( scope, element, attrs){
            // Extract the first part of the path.  Used to match against the menu lists
            var currentPath = /^\/?([^/]+)/.exec($location.path())[1];

            // check to see if the path is the same as the attribute
            if( attrs.jkSection.toUpperCase() == currentPath.toUpperCase() )
                element.show();
            else
                element.hide();
        };

        return{
            restrict: "A",
            link: linker
        };
    });

虽然这适用于页面加载，但是当我更改位置时，不会重新应用该指令。我想我需要在$位置添加一个监视，但不知道我需要做什么样的回调才能重新评估我的指令。

我认为问题的一部分是使用我的jk-section指令（在sidebar.html视图中使用）的html不是ng-view组件的一部分。但目前，我不想重构我的布局。

    <div class="flex-row flex-row--gutter-less flex-hbox main-container">
        <div ng-include="'build/views/sidebar.html'" class="sidebar-wrapper"></div>
        <div class="main-content" ng-view></div>
    </div>

其次，有没有比解析$ location.path（）从路由中提取信息更好的方法？有没有办法可以直接在$route对象中指定路由名称/别名/等？

Answer 1

如果您不想在模板中使用ng-hide/show/if，请将预期的链接行为放在另一个函数中，并将其作为您正在侦听的事件的回调运行。

var linker = function( scope, element, attrs){
    function render () {
      // Extract the first part of the path.  Used to match against the menu lists
      var currentPath = /^\/?([^/]+)/.exec($location.path())[1];

      // check to see if the path is the same as the attribute
      if( attrs.jkSection.toUpperCase() == currentPath.toUpperCase() )
          element.show();
      else
          element.hide();
    }

    scope.$on('$locationChangeSuccess', render);

    // Not sure if $locationChangeSuccess triggers on initial load. 
    // If yes, remove this line. 
    render();
};

话虽如此，模板中的ng-hide/show/if可能是更好的方法，只需设置$ scope变量而不是element.show()/hide()。

AngularJS重新评估$ location更改的指令

1 个答案: