【问题标题】:AngularJS - how to call another html page with .jsAngularJS - 如何使用 .js 调用另一个 html 页面
【发布时间】:2019-02-22 07:57:07
【问题描述】:

我正在学习 AngularJS 并尝试制作 sime 重定向应用程序。我有带有 dxTreeView 的 index.html(使用 devExtreme 组件)。我的目标是在点击 TreeView 菜单中的项目时加载不同的视图。

这是我的 index.html 的示例:

<body class="dx-viewport">
<div class="container" ng-app="MainContainer" ng-controller="MainController">
    <div class="left-content">
        <div id="simple-treeview" dx-tree-view="treeViewOptions"></div>
    </div>

    <div class="right-content">
        <div data-options="dxView: {name: 'mainView', title: 'Main View'}" id="right-view">
        </div>
    </div>
</div>

index.js:

MainApp.controller("MainController", function MainController($scope) {

$scope.treeViewOptions = {
    dataSource: treeLoginOption,
    selectionMode: "single",
    selectByClick: true,
    displayExpr: "name",
    keyExpr: "name",
    onItemClick: function (e) {
        var viewType = e.itemData.type;

        if (viewType == "Login") {
            $("#right-view").load("../views/" + viewType + ".dxview");
            LoginController(); !!!!Here is my problem !!!
            rebuildMenu();
        }
        else
        {
            $("#right-view").load("../views/" + viewType + ".html");
        }   
    }
} });

我需要调用另一个 html 页面,该页面具有 .js 文件和另一个控制器。使用我的方法,页面被调用,但不是带有控制器的 .js 文件。

登录.html:

<div class="form" ng-controller="LoginController">
        <div class="dx-fieldset">
            <div class="dx-fieldset-header">Přihlášení uživatele</div>

            <div class="dx-field">
                <div class="dx-field-label">Jméno</div>
                <div class="dx-field-value">
                    <div dx-text-box="textBox.name" id="textBox.name"></div>
                </div>
            </div>

            <div class="dx-field">
                <div class="dx-field-label">Heslo</div>
                <div class="dx-field-value">
                    <div dx-text-box="textBox.password" id="textBox.password"></div>
                </div>
            </div>
        </div>
    </div>

和 Login.js:

MainApp.controller('LoginController', function ($scope) {

console.log("Login page generate called.");

$scope.textBox = {
    name: {
        placeholder: "Jméno",
        visible: true
    },
    password: {
        placeholder: "Heslo",
        mode: "password",
        visible: true
    }
}; });

我真的很想得到你的帮助。感谢您的建议。

【问题讨论】:

    标签: javascript angularjs html devextreme devextreme-angular


    【解决方案1】:

    对于 angularJS 中的路由,您应该使用 angular-route 包。你可以阅读更多关于它here on the AngularJS docs

    【讨论】:

    • 好的,谢谢。我设法添加了角度路由,它现在调用控制器。凉爽的。但我还有另一个问题。如何在 .js 控制器中调用重定向?目标是动态生成菜单,所以我的布局中不能有 标签。
    • 我对此不是 100%,但我相信您可以将 $locationreload()updateParams 结合使用,如 here 所述
    • 我更新了 index.html &lt;div class="right-content"&gt; &lt;!--&lt;div data-options="dxView: {name: 'mainView', title: 'Main View'}" id="right-view"&gt; &lt;/div&gt;--&gt; &lt;div ng-view&gt;&lt;/div&gt; &lt;/div&gt; 并使用了 $window.location.href = "login"; 现在它重定向到 localhost:50073/login 并抛出 404 错误
    • AngularJS 路由默认路由到/#/login。如果您想更改此设置,请考虑使用 HTML5Mode,并注意当您推送到生产环境时,这需要一些托管解决方案,即 ExpressJS,因此它无法在 Github Pages 上运行。 This SO answer describes further。如果您还有其他问题,请创建一个新的 SO 线程,因为它们与当前问题无关。如果您能将此答案标记为解决方案,我也将不胜感激。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-02-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-04
    • 1970-01-01
    • 2021-08-02
    相关资源
    最近更新 更多