Question

我有一些看起来像这样的HTML：

<body ng-controller="main">
    <div id="main">
      <div ng-view></div>
    </div>
</body>

这是控制器：

var app = angular.module('buildson', ['ngRoute', 'ngAnimate']);

app.controller('main', function($scope) {
    $scope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {
        window.scrollTo(0, 0);
    });
});

这是路由：

//ROUTING
app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'home.html'
        })
        .when('/courses', {
            templateUrl : 'views/coursesTeaching.html'
        });
});

这是coursesTeaching.html

<div class="coursesList">
  [Display a list of courses here]
  <a href="#">Display Documentation</a>
</div>

这里是documentationWidget.html

Documentation Content is in this file

我想要做的是当他们点击此链接时<a href="#">Display Documentation</a>它将documentationWidget.html内容加载到<div class="documentationWidget"></div>点，我想它是视图或子路径中的视图。我无法使用jQuery Ajax或其他任何东西，因为我希望能够在加载的html文件中使用Angular变量。

Answer 1

查看ui-router作为ngRoute的替代方案。这对嵌套视图以及其他内容有很好的支持：https://github.com/angular-ui/ui-router

这里也有更详细的讨论：Difference between ng-route & ui-router

Answer 2

我被告知您应该使用第三方库ui-router进行复杂的路由操作。

在Angular中加载路径中的路径

2 个答案: