CODEWITHSUNDEEP
javascriptphpangularjsangular-ui-routerangular-controller
rpivovar
rpivovar

Reputation: 3438

Angular.js - Not understanding why my controller function isn't firing

This is taken from Jason Watmore's tutorial on building an Angular.js modal window: http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial

This is a separate file called index.controller.js that houses just this controller. 

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

})();

I have tried porting this to my app.js file within a controller called screeningsController, like this:

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

    // this is a test function
    $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);

    };

    // this is the function that was ported over
    function Controller(ModalService) {
        var vm = this;

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

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

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

}]);

The first function is just a test to see if the controller is able to be reached and working (it is). The second function "Controller" does not work. Dreamweaver throws the error, "'Controller' is defined but never used." This doesn't throw any errors in the browser console, but the function doesn't do anything.

Here is a section of my screenings partial screenings.php, where these functions are called:

...
while ($row = mysqli_fetch_array($result)){
        echo "<div id='img_div' ng-click='popup()'>";
            echo "<img id='img_screenings' class='modal_img' ng-click=\"vm.openModal('custom-modal-1')\" src='images/".$row['image']."' >";
...

The first echo houses the test function, and the second echo houses the other function. This is exactly how that function is called in the tutorial code. For reference:

<img class="picture" ng-click="vm.openModal('custom-modal-1')" src="picture.png">

Given all that, is there any indication as to why the second function is not working in my code?

Upvotes: 1

Views: 161

Answers (1)

Frank Modica
Frank Modica

Reputation: 10516

The original file used the Controller function as the actual controller: 

.controller('Home.IndexController', Controller);

But you created your own controller, and then moved the entire Controller function inside your own. You just need to take the functions:

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

    // this is a test function
    $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);

    };

    var vm = this;

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

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

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

}]);

Edit: Now you are binding to your controller in 2 different ways ($scope and this). You might want to just pick one of those to avoid confusion.

Upvotes: 1

Related Questions