3

I have a basic Angular.js app which is using ocLazyLoad for loading the application files. I am using the skeleton of the sbAdminApp template.

My problem is that when I use a template with an ng-click event, the click event is not being fired. It is not a scope problem because when I print the function's content to the view it is shown.

Here is some of my code:

For loading the files using ocLazyLoad: 

$stateProvider.state('dashboard.importLotteries', {
    templateUrl: '/Scripts/app/views/importLotteries.html',
    url: '/importLotteries',
    controller: 'LotteriesCtrl',
    resolve: {
        loadMyFiles: function ($ocLazyLoad) {
            return $ocLazyLoad.load({
                name: 'sbAdminApp',
                files: [
                    '/Scripts/app/scripts/services/lotteriesService.js',
                    '/Scripts/app/scripts/controllers/lotteries.js'

                ]
            })
        }
    }
}

This is the importLotteries.html template file:

<!-- /.row -->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                Import Lotteries
            </div>
            {{importLotteries.toString()}}
            <div class="panel-body">
                <input type="button" ng-click="importLotteries()"  value="Import"/>

                <span ng-model="importStatus">
                </span>
            </div>
        </div>
            <!-- /.panel -->
        </div>
    <!-- /.col-lg-12 -->
</div>

and this is the controller's code:

'use strict';
angular.module('sbAdminApp')
  .controller('LotteriesCtrl', function ($scope, lotteriesService) {

      $scope.importLotteries = function () {

          alert("importing");
          $scope.importStatus = "Loading...";
      };

  });

The result view looks like this:

enter image description here

So as you can see, the function exists on the scope but the click event is not firing and I don't get any errors.

I tried to search for a solution online for sometime now and couldn't find one, so any help will be greatly appreciated!

After further investigating the issue, I see that the event function (importLotteries) is undefined in the scope, but when I change the value to a string instead of a function the scope value is correct.

webdev5
  • 467
  • 1
  • 8
  • 22
Shai Aharoni
  • 1,955
  • 13
  • 25
  • @HanletEscaño No it shouldn't. You only add a prefix if you are using controllerAs syntax, which he isn't - and you probably wouldn't want to name it as $scope anyways. Shai, how do you know it isn't firing? Have you set a breakpoint in it? – matmo Jun 05 '16 at 04:04
  • @Shai How do you know it's ocLazyLoad problem? Did you try to load the files(lotteriesService.js, lotteries.js) earlier rather than loading them with ocLoazyLoad? – Saad Jun 05 '16 at 06:01
  • @matmo , yes I set a breakpoint and I added an alert command which is not executed. – Shai Aharoni Jun 05 '16 at 06:43
  • 1
    possible for you to make a fiddle/plnkr of your problem? – Rahul Arora Jun 12 '16 at 18:38
  • @ShaiAharoni I think you can share a plnkr or a fiddle of your problem, it will be easier to debug – Rahul Arora Jun 13 '16 at 19:47
  • @ShaiAharoni, can you include full html of your view, so that how you've implemented the controller in the view is clear. – Ahmad Baktash Hayeri Jun 18 '16 at 17:51
  • I couldn't find a solution for this problem so I decided to remove ocLazyLoad from my project. Now everything is working ok – Shai Aharoni Jun 21 '16 at 09:31

1 Answers1

0

Try attaching a ng-href or href to the link and it'll be fired. 

<input type="button" ng-click="importLotteries()" ng-href='#' value="Import"/>

Source:

[1] Angular ng-click with call to a controller function not working

Community
  • 1
  • 1
mico
  • 12,730
  • 12
  • 59
  • 99