javascript - Angular.js ui 路由器。元素仅对给定子元素可见

Question

我有一个像这样的抽象 View 状态的 View

项目.详细信息

以及子状态，例如

project.detail.settings

项目.detail.Summary

现在，在抽象的project.detail View 中，我有一个按钮应该仅在显示projects.detail.summary View 时可见。

我可以想象每个 subview 都可能触发 angular.js 服务，从而导致抽象 View 的模型发生变化。但没有更简单的方法吗？

类似于 ng-show="childView == 'summary' ?

我的 View 状态如下所示:

   var projectsDetail = {
        name: 'projects.detail',
        templateUrl: viewPath + '/projects/projects.Detail.html',
        controller: 'projectsDetailCtrl',
        abstract:true,
        url: '/:id',
    };

   var projectsDetailChangesets = {
        name: 'projects.detail.changesets',
        templateUrl: viewPath + '/projects/projects.detail.changesets.html',
        controller: 'projectsDetailCtrl',
        parent:projectsDetail,
        url: '/changesets',
    };

    var projectSummaries= {
        name: 'projects.detail.Summary',
        templateUrl: viewPath + '/projects/projects.Summary.html',
        controller: 'projectsSettingsCtrl',
        parent: projectsDetail,
        url: '/settings',
    };

Answer 1

您可以通过以下两种方式之一来完成此操作。您可以摆弄 ui-sref-active，它根据您是否处于特定状态向元素添加一个类。

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

(请注意，ui-router 的最新版本更改了 ui-sref-active 的工作方式并添加了 ui-sref-active-eq，这是旧版本)。

或者您可以使用常规 ng-ifs 使用类似于 $state.includes('projects.detail.Summary')} 的谓词来完成此操作。在这种情况下，您需要将 $state 添加到您的 $scope 中。当我必须这样做时，我会在 Controller 中执行:$scope.$state = $state，这感觉有点像黑客，但它确实有效。