如何在角色应用程序中创建链接？

Question

我在角应用中有一个链接，如下所示：

<tab ng-controller="childCtrl" heading="Children">
 <a href="#/parent/{{parent.Id}}/child/{{child.Id}}">edit</a>
</tab>

如何在标签中加载链接而不是刷新整个视图？

Answer 1

单击链接时，您可以定义所选标签内容的路径，并使用ng-include显示该标记。

<div ng-repeat="parent in parents">
  <div ng-repeat="child in parent.children">
    <a href="" ng-click="selectPath(parent, child);">
      Parent {{parent.Id}}, Child {{child.Id}}
    </a>
  </div>
</div>
<div ng-include="selected.path"></div>

以下是演示：http://plnkr.co/edit/7SPnluxUfcNNQDyeC6yt?p=preview

Answer 2

我喜欢其他一种处理所有路线的方法。具有嵌套视图的ui.router允许这样做。

<强>模板

<div ><a ui-sref="home.tab1" >Tab1</a></div>
<div><a ui-sref="home.tab2" >Tab2</a></div>
<br>
<div ui-view="tabs"></div> 

应用

var app = angular.module('plunker', ['ui.router']);
  app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'main.html',
        controller: 'MainCtrl',
        virtual: true
      })
      .state('home.tab1', {
        url: '/tab1',
        views: {
          tabs: {
            templateUrl: '1.html'
          }
        }

      })
      .state('home.tab2', {
        url: '/tab2',
        views: {
          tabs: {
            templateUrl: '2.html'
          }
        }
      });
      $urlRouterProvider
      .otherwise('/home/tab1');
  })

并演示http://plnkr.co/edit/r1jPgkMnPAMlI34gZrMA?refresh&p=preview