ui-router 自动路由到父控制器答案

【问题标题】：ui-router automatically routes to parent controllerui-router 自动路由到父控制器
【发布时间】：2016-04-08 02:11:57
【问题描述】：

我有一个带有嵌套视图的 ui 路由器的角度应用程序（在配置方法中）：

$stateProvider
.state('home', {
    url: '/home',
    views: {
        'mainView' : {
            templateUrl: 'templates/home.html',
            controller: 'HomeController'
        }
    },
    authenticate: true
})
.state('home.cargaDePadrones', {
    url: '/cargaDePadrones',
    views: {
        'contentView' : {
            templateUrl: 'templates/cargaDePadrones.html',
            controller: 'CargaDePadronesController'
        }
    },
    authenticate: true
})

在主页视图中我有这个：

<md-content layout="row" layout-fill>
    <md-content ng-show="showTreeMenu" class="TextoInstitucional menuCell" flex="20">
        <treecontrol class="tree-classic" tree-model="treeData" options="treeOptions"
            on-selection="showSelected(node)" expanded-nodes="expandedNodes">
            {{node.name}}
        </treecontrol>
    </md-content>
    <div style="background-color: #CECECE; width: 9px;" layout="column" layout-align="center center">
        <a flex href="#" ng-show="showTreeMenu" ng-click="toggleMenu()">
            <img style="border: 0 none;" src="images/middle_toggle_left.gif" />
        </a>
        <a flex href="#" ng-show="!showTreeMenu" ng-click="$parent.toggleMenu()">
            <img style="border: 0 none;" src="images/middle_toggle_right.gif" />
        </a>
    </div>
    <md-content class="TextoGrande contentCell" style="padding-left: 10px;" ui-view="contentView" ng-cloak flex>
    </md-content>
</md-content>

在家庭控制器中我有这个：

$scope.showTreeMenu = true;

$scope.toggleMenu = function() {
    $scope.showTreeMenu = !$scope.showTreeMenu;
};

这个想法是，每当用户点击锚点时，页面的一部分（菜单）就会隐藏起来，以便给它更多的工作空间，当它点击另一个锚点时，它会将菜单带回来。

问题在于，每当我点击在主视图中可见的锚点（执行 toggleMenu 范围方法）时，嵌套视图（名为“contentView”）中的内容就会消失。查看浏览器路径，它会自动从 /home/cargaDeParones 路由到 /home（从子状态路由到父状态）。我假设发生这种情况是因为在 Home 控制器中定义了 toggleMenu 方法，但我不知道如何防止这种行为。

如何在不路由回它的情况下公开父范围方法？？

谢谢:)

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

锚标签href值为'#' ，这就是它进入主页的原因。请将锚标签 href 标签更改为：

<a flex href="JavaScript:void(0)" ng-show="showTreeMenu" ng-click="toggleMenu()">
        <img style="border: 0 none;" src="images/middle_toggle_left.gif" />
</a>

【讨论】：