AngularJS - как вызвать другую html-страницу с помощью.js

Я изучаю 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
    }
}; });

Я бы очень хотел вашей помощи. Спасибо за совет.

Источник

1 ответ

Решение

Для маршрутизации в angularJS вы должны использовать angular-route пакет. Вы можете прочитать больше об этом здесь на документах AngularJS

Источник
Другие вопросы по тегам