javascript - 使用 Angular 路线段时不显示 AngularJS 嵌套 View-6ren

javascript - 使用 Angular 路线段时不显示 AngularJS 嵌套 View

转载作者：行者123 更新时间：2023-11-30 05:44:56

26

4

我在移动应用程序中使用嵌套 View 。我正在尝试使用这个模块:

http://ngmodules.org/modules/angular-route-segment

但我可以看到模板通过 XHR 加载，但页面上没有显示任何内容。

我也不确定 Controller 是否正在加载，示例应用程序似乎将 Controller 引用作为字符串或引用混合传递。

我尝试使用 UI-router 取得了更大的成功，但它似乎不再支持 AngularJS 的最新 RC 的动画 View ，而这是我必须在我的应用程序中拥有的东西。

这是我的 app.js:

var app = angular.module('HealIntApp', ['ngRoute', 'angular-carousel', 'ngAnimate', 'ngTouch', 'route-segment', 'view-segment']);

app.config(['$routeSegmentProvider', '$routeProvider', function($routeSegmentProvider, $routeProvider){

    $routeSegmentProvider.options.autoLoadTemplates = true;

    $routeSegmentProvider
    .when('/', 'index')
    .when('/setup/charting', 'setup.charting')
    .when('/setup/contacts', 'setup.contacts')
    .when('/setup/medical', 'setup.medical')
    .when('/setup/ready', 'setup.ready')
    .when('/setup/gps', 'setup.gps')
    .when('/setup/net', 'setup.net')
    .when('/setup/settings', 'setup.settings')
    .segment('index', {
        templateUrl: 'js/app/partials/main.html',
        controller: 'CtrlMain'
    })
    .within()
        .segment('setup', {
            templateUrl: 'js/app/partials/setup.html',
            controller: 'CtrlSetup'
        })
        .within()
            .segment('charting', {
                templateUrl: 'js/app/partials/setup.charting.html'
            })
            .segment('contacts', {
                templateUrl: 'js/app/partials/setup.contacts.html',
                controller: 'CtrlSetupContacts'
            })
            .segment('medical', {
                templateUrl: 'js/app/partials/setup.medical.html',
                controller: 'CtrlSetupMedical'
            })
            .segment('ready', {
                templateUrl: 'js/app/partials/setup.ready.html',
                controller: 'CtrlSetupReady'
            })
            .segment('gps', {
                templateUrl: 'js/app/partials/setup.gps.html'
            })
            .segment('location', {
                templateUrl: 'js/app/partials/setup.location.html'
            })
            .segment('net', {
                templateUrl: 'js/app/partials/setup.net.html'
            })      
            .segment('settings', {
                templateUrl: 'js/app/partials/setup.settings.html',
                controller: 'CtrlSetupSettings'
            });

}]);

我的 index.html:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" lang="en" ng-app="HealIntApp">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
        <link rel="stylesheet" type="text/css" href="css/lib/pure-0.2.1.css" />
        <link rel="stylesheet" type="text/css" href="css/lib/font-awesome.css" />
        <link rel="stylesheet" type="text/css" href="css/lib/angular-carousel.css" />
        <link rel="stylesheet" type="text/css" href="css/app.css" />
        <title>HealInt</title>
    </head>
    <body>
        <div class="pure-g">
            <div class="pure-u-1" app-view-segment="index">
            </div>
        </div>
        <script src="js/lib/cordova.js"></script>
        <script src="js/lib/angular-1.2.js"></script>
        <script src="js/lib/angular-mobile.js"></script>
        <script src="js/lib/angular-touch.js"></script>
        <script src="js/lib/angular-route.js"></script>
        <script src="js/lib/angular-animate.js"></script>
        <script src="js/lib/angular-route-segment.min.js"></script>
        <script src="js/lib/angular-carousel.js"></script>
        <script src="js/app.js"></script>
        <script src="js/app/factory/cordova-ready.js"></script>
        <script src="js/app/controllers/main-ctrl.js"></script>
        <script src="js/app/controllers/setup-ctrl.js"></script>
        <script src="js/app/controllers/setup-ready-ctrl.js"></script>
        <script src="js/app/controllers/setup-settings-ctrl.js"></script>
        <script src="js/app/controllers/setup-contacts-ctrl.js"></script>
        <script src="js/app/controllers/setup-medical-ctrl.js"></script>
    </body>
</html>

我的 main.html 部分应该被拉入根 URL 的 DOM 中:

<div class="pure-u-1">
    <a href="#/setup" class="pure-button pure-button-primary">Setup</a>
</div>

以及不记录任何内容的关联 Controller :

app.controller('CtrlMain', function ($scope, $rootScope) {
    console.log('main controller loaded');
});

最佳答案

不要使用段名，使用段索引号。示例:

<div class="pure-u-1" app-view-segment="0"></div>

如果您需要嵌套路由，请使用 app-view-segment="1"等。

关于javascript - 使用 Angular 路线段时不显示 AngularJS 嵌套 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18530567/

26

4

0

文章推荐： javascript - 如何获取使用jquery选中的复选框的值

文章推荐： c++ - boost 静态链接 boost.locale 错误

文章推荐： c++ - 在 dmg C++ 中运行 pkg

文章推荐： javascript - 使插件特定于元素

view - Laravel View 无法调用子文件夹 View
我在尝试从子文件夹调用 View 时遇到一些错误。首先，这东西能用 Route::get('/', function() { return View::make('sample'); }); 但是当我
mvvm - 显示当前 View 模型中的另一个 View 并关闭 View 模型中的 View ？
我有另一个 View 设置，并准备好等待其viewmodel。我的RelayCommand到达我的“当前” View 模型。从当前的 View 模型显示新 View 的最佳方法是什么？我一直在阅读，
view - 如何共享从其他数据集中查询其他 View 的授权 BigQuery View ？
我有一个 bigquery View ，我想与数据分析师共享，以便他们可以通过 Data Studio 访问其数据。此共享 View 对另一个数据集中的私有(private) View 进行查询，而私
view - Jenkins - 将 View 移入 View
我有 3 个 View ，并希望将它们集成到一个 View 中，以便它们成为这一 View 中的子文件夹。我怎样才能做到这一点？还是我必须制作一个 View ，然后再次手动添加和配置这些 View
views - ouchdb View ，该 View 在数组字段中搜索作为键数组传入的值
我在沙发数据库中有一些文档，这些文档的字段是不同关联文档的ID数组: { associatedAssets: ["4c67f6241f4a0efb7dc2abc24a004dfe", "270f
wpf - 共同的共享 View 。 View + View 模型或用户控件？
我正在开发一个小实用程序 View ，它将嵌入到我们的几个应用程序中。它将位于一个公共(public)图书馆中。我应该将其作为 ViewModel 以及默认的 View 实现公开，还是作为具有固定
c# - 如果不同的 View 共享同一 View 模型，如何从 View 模型中选择 View
由于我的某些 View 具有相似的功能，因此我希望能够与每个 View 共享相同的 View 模型。我的想法是将 token 传递给viewmodel的构造函数，但这将导致代码中出现许多if和else
swift - View 旋转后移动 View ， View 中触摸位置错误
我有一个目标 View (蓝色 View 和红色 View 用于左上角位置)。我试图用手指移动这个 View 。如果 View 不旋转，一切都很好。但当我旋转 View 并移动时，第一次就很好了。但
android - 尝试在空对象引用上调用虚拟方法 'android.view.View android.view.View.getRootView()'
我收到这个错误， "Attempt to invoke virtual method 'android.view.View android.view.View.getRootView()' on a
wpf - 使用数据模板将 View 与 View 模型相关联时，如何动画化从一个 View 到另一个 View 的过渡
我将发布我目前拥有的源代码，然后解释我的问题。这是我希望过渡发生的窗口这是关联的 View 模型 public class MainViewModel {
iphone - self.view = someController.view 与 [self.view addSubview :someController. view]
我正在尝试找出我遇到的错误。最初，我的同事只是使用将 View 添加到 subview 中 [self.view addSubview:someController.view]; 来自当前ViewC
wpf - MVVM:所有 View 的一个 View 模型结构与每个 View 单独的 View 模型结构？
我是 MVVM 的新手，需要一些帮助。我的应用程序由许多不同的窗口组成，这些窗口显示允许用户编辑业务层中的数据的控件。目前，每次用户打开这些窗口之一的新实例时，都会从头开始创建一个 ViewMod
java - 尝试在空对象引用上调用虚拟方法 'android.view.View android.view.View.findViewById(int)'
我一直在寻找与我类似的问题以找到解决方案，但我真的找不到类似的东西。我试图使用 asynctask 类从解析中下载帖子数组，在获取帖子后，它应该在我的页面中设置帖子数组，并执行 setAdapter
java - EJB View (本地 View 、远程 View 、无接口(interface) View )的含义是什么
这个问题在这里已经有了答案: What is local/remote and no-interface view in EJB? (2 个答案) 关闭 9 年前。我以前理解它的意思是“接口(in
ios - 我如何在堆栈 View 中找到 View 的 super View /父 View Controller
希望这不会太困惑。我有一个主视图 Controller ( MainView )，在 View 底部有一个堆栈 View ，在堆栈 View 中我有三个 View 。在一个 View 中(我们称之为
iPhone 如何将 View Controller 的 View 添加到另一个 View Controller 的 View ？
我一直在想这个问题，我真的不知道如何正确地将一个 View Controller 管理的 View 添加到另一个 View Controller 的 View 中。这不起作用，因为 View 没有完
view - 是否有任何简单的方法可以将特定文件从一个 View 复制到另一个 View 中的 clearcase？
在明显的情况下，我必须将大量文件从一个 View 复制到另一个 View 。要复制的文件名将作为输入给出。有什么想法可以通过脚本实现吗？谢谢，日语最佳答案最简单的方法是使用 clearfsimp
jquery - 如何在完整日历中查找月 View 或周 View 或日 View
我正在使用完整日历。这里我的问题是，当单击上一个按钮或下一个按钮单击功能时，如何找到月 View 、周 View 或日 View 格式的完整日历。这里正在调用下一个和上一个按钮的自定义代码。因为使用这
sql - View 与索引 View 或物化 View 的区别
我对这两者感到困惑，并试图找出差异，但没有得到我正在寻找的特定内容。在哪里使用索引 View 而不是普通 View 。它们之间的一些重要区别。最佳答案关键的区别在于物化 View 很好，物化了
cocoa - 在单个自定义 View 中将一个 View 切换到另一个 View
我在一个 xib 中有一个 CustomView，在两个不同的 xib 中有两个不同的 View 。我想在一个 CustomeView 中依次显示这两个 View 。我有一个 NSView 对象，它连

首页

博学

6Ren·AI

商城

javascript - 使用 Angular 路线段时不显示 AngularJS 嵌套 View