Question

我正在尝试在AngularJs中实现单页面应用程序。但是，当我在Tree.Html中选择链接（{{item.Name}}）时。相应的视图不会显示在ng-View中。

任何帮助将不胜感激

main.html中

<body ng-app="InfoModule" ng-controller="MainController" style="max-width:1000px; margin:auto">
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Information</a>

        </div>
        <span class="pull-right navbar-text">{{UserName}}</span>
    </div>
</nav>

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">

        Info Page
        <div ui-tree data-drag-enabled="false">
            <ol ui-tree-nodes ng-model="itemList" class="font-weight-normal">
                <li ng-repeat="item in itemList track by $index" ui-tree-node ng-include="'Tree.html'">

                </li>
            </ol>

        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
        <div ng-include="Details"></div>
        <div data-ng-view>

        </div>

    </div>
</div>
<div class="panel-footer">
    (C) My Solutions
</div>

Tree.html

<div ui-tree-handle class="tree-node tree-node-content">
<a class="btn btn-success btn-xs" ng-if="item.nodes && item.nodes.length > 0" ng-click="toggle(this)">
    <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
</a>
<a href="#Details" >
    {{item.Name}}
</a>

Master.js

var app = angular.module('InfoModule', ['ui.tree', 'ngRoute', 'ngStorage']);

app.config（[＆＃39; $ routeProvider＆＃39;，＆＃39; $ locationProvider＆＃39;，function（$ routeProvider，$ locationProvider）{

$routeProvider
.when('/login', {
    templateURL: 'Login.html',
    controller: '/mYscriptS/LoginController.js'
})
.when('Details', {
    templateURL: 'pages/Details.html',
    controller: '../mYscriptS/DetailsController.js'
})

    .when('/Main', {
        templateURL: 'main.html',
        controller: '/mYscriptS/MainController.js'
    });
//.otherwise({
//    redirectTo: 'pages/Main.html'
//    //templateURL: '/Main.html',
//    //controller: '/mYscriptS/MainController.js'
//});

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

$locationProvider.html5Mode(true);

}]）;

Details.html

<div ng-controller="DetailsController" >
<div class="row">
    <div class="col-md-6">
        User Id
        {{UserName}}
    </div>
    <div class="col-md-6">
        <input type="text" name="txtUserId" />
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        Password
    </div>
    <div class="col-md-6">
        <input type="text" name="txtPassword" />
    </div>
</div>

Answer 1

一旦我遇到了与你相同的问题。

我试图解决这个问题，很多人都建议使用“ui.router＆＃39;而不是＆＃39; ngRoute＆＃39;。

可能它们之间存在更多差异。

但即使只是这个解释，也可以帮助你决定支持。

ngRoute是一个角度核心模块，适用于基本场景。我相信他们会在即将发布的版本中添加更强大的功能。

Ui-router是一个克服了ngRoute问题的贡献模块。主要是嵌套/复杂视图。

网址：https://github.com/angular-ui/ui-router

未在单页面应用程序Angular JS中加载的页面

1 个答案: