AngularJS - 部分和模板的嵌套不起作用

Posted

技术标签:

【中文标题】AngularJS - 部分和模板的嵌套不起作用【英文标题】:AngularJS - nesting of partials and templates doesn't work 【发布时间】:2013-11-27 13:59:21 【问题描述】:

我正在尝试实施 ProLoser 在link 中提供的解决方案 在我的Plunk。我的问题是,每当我按下链接而不是在链接下方的子视图中打开时,它都会覆盖整个视图。

我需要了解如何解决这个问题。

我的流程是这样的:index.html -> content.html (ng-view) -> link1/2/3.html(使用ng-include)。

我的布局:

Index.html:

<!DOCTYPE html>
<html ng-app="webApp">
  <head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <header>This is header</Header>        
    <div class="content" ng-view>

    </div>
  </body>

</html>

content.html:

<div>
  <h1>This is Content brought to you by ngView</h1>
  <br>
  <a href="#/sub/link1">link1</a>
  <a href="#/sub/link2">link 2</a>
  <a href="#/sub/link3">link 3</a>

  <ng-include src="'/sub/'+link + '.html' "></ng-include>

</div>

我的代码:

var webApp = angular.module('webApp', []);

//router logic
webApp.config(['$routeProvider', function($routeProvider) 
    $routeProvider.
        when('/', 
            templateUrl: 'content.html',
            controller: 'MainCtrl'
        )
        .when('/sub/:link', 
            controller: 'LinkCtrl'
        )
        .otherwise(redirectTo: '/');
]);

//controllers
webApp.controller ('MainCtrl', function ($scope, $routeParams) 
    $scope.link = $routeParams.link
);

【问题讨论】:

【参考方案1】:

你没有 LinkCtrl 来处理链接,如果你改变它应该可以工作:

.when('/sub/:link', 
        controller: 'LinkCtrl'
    )

.when('/sub/:link', 
        templateUrl: 'content.html',
        controller: 'MainCtrl'
    )

并编辑该行:

<ng-include src="'/sub/'+link + '.html' "></ng-include>

到:

<ng-include src="link + '.html'"></ng-include>

【讨论】:

以上是关于AngularJS - 部分和模板的嵌套不起作用的主要内容,如果未能解决你的问题,请参考以下文章

使用 AngularJS 的 Twitter Bootstrap 导航栏 - 折叠不起作用

(AngularJS) 设置 UI-Router 后注入不起作用

MailChimp 内容块拖放不起作用

我如何在 angularjs 中显示子嵌套评论

AngularJS和rails cors标头不起作用

Angularjs引导下拉菜单不起作用