Angular Modal Window not working for the life of me

Question

I'm very new to Angular.js.

I've taken the necessary elements from this tutorial on modal windows within Angular.js: http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial

Isolated, I can get this code to work, but after porting it to my website, I just can't get it to work.

In Jason's code, he has a file called index.controller.js, and although I've ported this file to my own page, I don't believe it's firing. Here's 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);
        }
    }

})();

On my own page, I have all the controllers contained within app.js. Here's how it's laid out:

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

...

});

You can see that, in the second .state, I'm attempting to call on the index.controller.js file for this particular partial. For some reason, though, the code under screeningsController (down below) is the code that's firing.

Further down in the same app.js file, I have my controllers:

...

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

    };

}]);

...

Is there any way I can somehow integrate what's in the index.controller.js file into my screeningsController in the app.js? I've been trying to get a modal window working on my site for about a week now. Any help is much appreciated.

Answer 1

Start by creating a controller with identifier Home.IndexController. Based on the route configuration this will instantiate when you navigate to "/screenings". Call the popup() function attached to $scope of Home.IndexController via a directive us ng-click for testing. As you have specified controllerAs make sure to reference controller properties and methods prefixed with vm..

You do not need both index.controller.js and app.js both loaded. It looks everything you'd need is defined in app.js, so just make sure that is being loaded in your application. Eventually you'd want to separate these into different files and/or modules as necessary.

Try the following:

Configuration:

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

Screenings Template:

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

This also assumes you have ui-view specified somewhere in your main template like index.html or equivalent:

<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>