Переменная AngularJS не сохраняется для просмотра

0

Имея странную ошибку здесь, я могу успешно переключиться на другие представления, но моя проблема в том, что даже простая переменная не может "достигать" представления. Кто-нибудь видит мою (возможно, тупую) ошибку?

Index.html

<html ng-app="myApp">
<head>
    <title>AngularJS oefening</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <header>
            <a href="#/home">Home</a>
            <a href="#/about">Over ons</a>
            <a href="#/contact">Contact</a>
        </header>
        <div ng-view>

        </div>
        <footer>
            Copyright...
        </footer>
    </div>

    <script src="js/angular/angular.min.js"></script>
    <script src="js/angular/angular-route.min.js"></script>
    <script src="js/controller.js"></script>
</body>

Controller.js

angular.module('myApp', ['ngRoute'])
    .config(moduleConfig);

moduleConfig.$inject = ['$routeProvider'];

function moduleConfig($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'views/home.html',
        controller: 'homeController',
        contollerAs : 'homeCtrl'
    })
    .when('/home', {
        templateUrl: 'views/home.html',
        controller: 'homeController',
        contollerAs : 'homeCtrl'
    })
    .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'aboutController',
        contollerAs : 'aboutCtrl'
    })
    .when('/contact', {
        templateUrl: 'views/contact.html',
        controller: 'contactController',
        contollerAs : 'contactCtrl'
    })
    .otherwise({
        redirectTo: '/'
    });
};

angular.module('myApp')
    .controller('homeController', homeController)
    .controller('aboutController', aboutController)
    .controller('contactController', contactController);

function homeController() {
    this.msg = "Hello home";
};

function aboutController() {
    this.msg = "Hello about";
};

function contactController() {
    this.msg = "Hello contact";
};

home.html

<div>
    <h1>{{homeCtrl.msg}}</h1>
</div>

Я тестировал с жестко закодированным текстом, и он дает правильный вид, когда я использую меню для навигации. Я также пробовал записывать различные объекты (homeController, homeCtrl,...). Только переменная this НЕ НЕ определена, но эта только содержит $ scope.

Заранее спасибо.

  • 0
    Вам не хватает <base href = "/" /> в разделе head. Попробуйте сделать console.log на каждом контроллере. Это должно дать вам понять, правильно ли они подключаются.
  • 0
    Я не получаю никаких ошибок консоли, так почему я должен использовать тег <base>? Я пробовал консольный вход в контроллеры, и они появляются. РЕДАКТИРОВАТЬ: он даже показывает тег <p> в HTML, когда я открываю представление (<p class = "ng-binding"> </ p>)
Показать ещё 1 комментарий
Теги:
angularjs-routing
angularjs-controlleras

1 ответ

0
Лучший ответ

После обыска почти 2 часа. Я нашел свою тупую глупую ошибку.

contollerAs → cont r ollerAs

Поделиться
  • 0
    Хороший момент, это одна из проблем JS, вы можете добавлять параметры до бесконечности без каких-либо ошибок.
  • 0
    Да, в самом деле. Я нахожу это настолько странным, что Angular не писал никаких проверок по этим параметрам. Не могу представить, что я первый с этой "проблемой", ха-ха.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню