AngularJS

Question

我正在学习 AngularJS 并尝试制作 sime 重定向应用程序。我有 index.html 和 dxTreeView（使用 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 文件。

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

我真的很想得到你的帮助。谢谢指教。

Answer 1

对于 angularJS 中的路由，您应该使用 angular-route package. You can read more about it here on the AngularJS docs

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

AngularJS - how to call another html page with .js

javascript

html

devextreme

devextreme-angular