Question

我有一个像

这样的抽象视图状态

project.detail

和孩子的状态如

project.detail.settings

project.detail.Summary

现在在抽象的project.detail视图中，我只有在显示视图projects.detail.summary时才能看到按钮。

我可以想象每个子视图可能会触发angular.js服务，这会导致改变抽象视图的模型。但是不是更方便吗？

像ng-show =“childView =='summary'？

我的观点看起来像这样：

   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。当我必须这样做时，我会在我的控制器中执行：$scope.$state = $state，感觉有点像黑客，但它确实有效。

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

1 个答案: