AngularJS-如何使用.js调用另一个HTML页面

时间:2019-02-22 07:57:07

标签: javascript angularjs html5 devextreme devextreme-angular

我正在学习AngularJS,并尝试制作sime重定向应用程序。我有dxTreeView(使用devExtreme组件)的index.html。我的目标是单击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文件。

Login.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
    }
}; });

我真的很希望您的帮助。感谢您的建议。

1 个答案:

答案 0 :(得分:0)

要在angularJS中进行路由,应使用angular-route软件包。您可以详细了解here on the AngularJS docs