Angular Modal Window не работает на всю жизнь

Я очень новичок в Angular.js.

Я взял необходимые элементы из этого руководства по модальным окнам в Angular.js: http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial

Изолированный, я могу заставить этот код работать, но после переноса его на свой веб-сайт я просто не могу заставить его работать.

В коде Джейсона у него есть файл с именем index.controller.js, и хотя я перенес этот файл на свою страницу, я не верю, что он срабатывает. Вот index.controller.js:

(function () {

    angular
        .module('app')
        .controller('Home.IndexController', Controller);

    function Controller(ModalService) {
        var vm = this;

        vm.openModal = openModal;
        vm.closeModal = closeModal;

        function openModal(id){
            ModalService.Open(id);
        }

        function closeModal(id){
            ModalService.Close(id);
        }
    }

})();

На моей собственной странице у меня есть все контроллеры, содержащиеся в app.js. Вот как это устроено:

var app = angular.module('app', ['ngRoute', 'ui.router']);

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

    $locationProvider.hashPrefix('');

    $urlRouterProvider.otherwise("/");

    $stateProvider

     .state('home', {
        url: '/',
        templateUrl: 'pages/main.html',
        controller: 'mainController',
        controllerAs: 'vm'
     })

 .state('screenings', {
    url: '/screenings',
    templateUrl: 'pages/screenings.php',
    controller: 'Home.IndexController',
    controllerAs: 'vm'
 })

...

});

Вы можете видеть, что во втором .state я пытаюсь вызвать файл index.controller.js для этого конкретного фрагмента. Однако по какой-то причине срабатывает код в screeningsController (внизу).

Далее в том же файле app.js у меня есть контроллеры:

...

app.controller('screeningsController', ['$scope', '$log', function($scope, $log){

    $scope.popup = function() {

    // assign a message to the $scope
    $scope.message = 'Hello World!';

    // use the $log service to output the message in a console
    $log.log($scope.message);

    };

}]);

...

Можно ли каким-то образом интегрировать то, что находится в файле index.controller.js, в мой screeningsController в app.js? Я пытался заставить модальное окно работать на моем сайте уже около недели. Буду признателен за любую оказанную помощь.


person rpivovar    schedule 12.05.2017    source источник
comment
ngRoute, объявленный в верхней части файла app.js, может больше не понадобиться. Я использовал ngRoute до работы с кодом Джейсона. Он использовал ui-router, поэтому я реализовал это.   -  person rpivovar    schedule 12.05.2017
comment
Где определяется Home.IndexController? Вы намеревались использовать контроллер screeningsController для маршрута / скрининга? Если это так, вам нужно обновить маршрут до controller: 'screeningsController'.   -  person Alexander Staroselsky    schedule 12.05.2017
comment
Я проверял, будет ли он каким-то образом использовать index.controller.js вместо screeningsController. Изначально у меня было controller: 'screeningsController'. Даже в том виде, в котором это написано сейчас, он все еще, похоже, запускает screeningsController.   -  person rpivovar    schedule 12.05.2017
comment
В коде Джейсона он называет контроллер 'Home.IndexController', поэтому я попытался посмотреть, будет ли каким-то образом выполняться index.controller.js. Я не совсем уверен, как выполняется index.controller.js.   -  person rpivovar    schedule 12.05.2017
comment
Имя файла не имеет значения для angular, его строковый идентификатор является ключевым. Значение свойства controller вашего определения маршрута должно соответствовать идентификатору, указанному вами в app.controller('someIdentifierGoesHere', [function() {}]). Скорее всего, вам потребуется поделиться своим HTML-кодом, чтобы определить, являетесь ли вы триггерными контроллерами для создания экземпляров с помощью такой директивы, как ng-controller.   -  person Alexander Staroselsky    schedule 12.05.2017
comment
Если он все еще запускает screeningsController, ваш браузер должен использовать старую версию вашего js, это иногда случается.   -  person ukn    schedule 12.05.2017
comment
@ukn Я нажимал «Очистить кеш» и «Жесткая перезагрузка» в Chrome — будет ли после этого срабатывать screeningsController?   -  person rpivovar    schedule 12.05.2017
comment
Если у вас где-то в файлах для углового приложения нет app.controller('Home.IndexController', то тот маршрут с controller: 'Home.IndexController' просто не будет работать.   -  person Alexander Staroselsky    schedule 12.05.2017
comment
@AlexanderStaroselsky О, чувак, я вижу, что в частичке написано <div id="screenings" ng-controller="screeningsController"> в самом верху. Бьюсь об заклад, это то, что вы имеете в виду. Фу   -  person rpivovar    schedule 12.05.2017
comment
Так что, если я изменю это на <div id="screenings" ng-controller="Home.IndexController">, это потенциально вызовет запуск кода в index.controller.js?   -  person rpivovar    schedule 12.05.2017


Ответы (1)


Начните с создания контроллера с идентификатором Home.IndexController. В зависимости от конфигурации маршрута это будет создано, когда вы перейдете к «/ screenings». Вызовите функцию popup(), прикрепленную к $scope Home.IndexController, с помощью директивы us ng-click для тестирования. Поскольку вы указали controllerAs, обязательно ссылайтесь на свойства и методы контроллера с префиксом vm..

Вам не нужно загружать оба index.controller.js и app.js. Похоже, все, что вам нужно, определено в app.js, поэтому просто убедитесь, что оно загружается в ваше приложение. В конце концов вы захотите разделить их на разные файлы и/или модули по мере необходимости.

Попробуйте следующее:

Конфигурация:

var app = angular.module('app', ['ngRoute', 'ui.router']);

app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

    $locationProvider.hashPrefix('');

    $urlRouterProvider.otherwise("/");

    $stateProvider

     .state('home', {
        url: '/',
        templateUrl: 'pages/main.html',
        controller: 'mainController',
        controllerAs: 'vm'
     })
     .state('screenings', {
        url: '/screenings',
        templateUrl: 'pages/screenings.php',
        controller: 'Home.IndexController',
        controllerAs: 'vm'
     });

     ...
});

Home.IndexController:

app.controller('Home.IndexController', ['$log', function($log){

    var vm = this;

    vm.message = '';

    vm.popup = function() {
        vm.message = 'foobar';
        $log.log(vm.message);
    }
}]);

Шаблон показов:

<!-- Home.IndexController /screenings template -->
<div>
    <button type="button" ng-click="vm.popup()"></button>
</div>

Это также предполагает, что где-то в вашем основном шаблоне указано ui-view, например index.html или его эквивалент:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>

<body ng-app="app">
    <div ui-view></div>

    <!-- Vendor and Custom scripts added here -->
</body>

</html>
person Alexander Staroselsky    schedule 12.05.2017
comment
Мои извинения, я вставил неверный код для index.controller.js, но исправил его выше. Так что, если я вставлю код function Controller(ModalService) { var vm = this; vm.openModal = openModal; vm.closeModal = closeModal; function openModal(id){ ModalService.Open(id); } function closeModal(id){ ModalService.Close(id); } } в screeningsController, в app.js, это должно сработать? Учитывая, что ng-controller установлен на screeningsController, а контроллер для screenings .state также установлен на screeningsController? - person rpivovar; 12.05.2017
comment
оператор Hello World выполняется, а функция, взятая из index.controller.js, — нет. - person rpivovar; 12.05.2017
comment
ui-router с определениями для указанных контроллеров, используемых для данного маршрута, почти полностью устраняет необходимость в ng-controller в вашем шаблоне. Я бы порекомендовал убрать ng-controller и вместо этого поместить необходимую логику в Home.IndexController или как там вы его назовете. - person Alexander Staroselsky; 12.05.2017
comment
Я сделаю демонстрацию, пожалуйста, подождите - person Alexander Staroselsky; 12.05.2017
comment
Спасибо за помощь. Я пытался заставить это работать в течение недели полной занятости. Мне нужно многому научиться. - person rpivovar; 12.05.2017
comment
Вот ссылка на пример, показывающий ui-router, а также несколько контроллеров с controllerAs в действие. Технически файлы могут называться как угодно, просто убедитесь, что они указаны/загружены в index.html. Избегайте использования ng-controller, поскольку ui-router помогает загрузить правильный контроллер для определенного маршрута. Сосредоточьтесь на том, чтобы имена ваших файлов контроллеров соответствовали тому, как контроллеры идентифицируются. - person Alexander Staroselsky; 13.05.2017
comment
Это невероятно полезно. Большое спасибо! - person rpivovar; 13.05.2017