Sunday, June 19, 2016

ng-click event not working with ocLazyLoad

By Hường Hana 11:00 AM , , , Leave a Comment

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.

1 Answers

Answers 1

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

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment