在同一页面AngularJs中的两个ui-view

时间:2014-09-11 23:17:34

标签: javascript html ruby angularjs

我是AngularJs的新手,我有一个问题,我在同一页面上有两个ui-view,当按下一个按钮例如显示视图目标时,在ui中显示表单目标-view 1,同时也在第二个ui-view中,我和各州一起工作。我不知道如何按下一个按钮只显示属于一个ui-view的表单,

看看我的来源:

HTML

    <button class="btn btn-success"
    ng-click="go('projectShow.milestones.reports')">New Report</button>

    <div ui-view class="crearreport"></div>


    <button class="btn btn-success"
    ng-click="go('projectShow.milestones.goals')">New Goals</button>

    <div ui-view class="creargoal"></div>

Controllerjs:

    $scope.go = function(route){ $state.go(route);  };

RouteJs:

    .state('projectShow.milestones.goals', {
                    templateUrl: '../assets/projects/formulario.html', })           
    .state('projectShow.milestones.reports',{
                        templateUrl: '../assets/reports/formularioReport.html'  })

问候!谢谢你的时间!

1 个答案:

答案 0 :(得分:5)

由于您有多个ui-view指令,因此您需要为每个指令指定一个名称,以便您可以单独定位它们。

根据ui-router wiki

  

您在任何模板(或根html)中只能有一个未命名的视图

<!-- Unnamed -->
<div ui-view></div> 

<!-- Named -->
<div ui-view="viewName"></div>

有关如何设置ui-router&amp; amp的详细信息。你在这里看。 https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-view