ocombe / ocLazyLoad

Lazy load modules & components in AngularJS
https://oclazyload.readme.io
MIT License
2.63k stars 510 forks source link

ng-click not firing #314

Open internetbird opened 8 years ago

internetbird commented 8 years ago

Hi, I have a basic angular admin panel which is using the sbAdminApp template. When i am binding a basic template view everything is working as expected but when I add an ng-click event , it is not firing and I don't get any errors...

The function exists in the controller's scope because when I print it to the screen , I see the code. 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 here is the controller's code:

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

      $scope.importLotteries = function () {

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

  });
nkanand4 commented 8 years ago

Any errors logged in console?

internetbird commented 8 years ago

@nkanand4 , no ,I don't get any errors. The event is just not fired.

dg14 commented 8 years ago

hi, i've the same problem. for now i resolved removing ocLazyLoad and loading all controllers into index.html. but it's a shame. sometimes it's solved refreshing and clearing cache but it's not always true. it's not deterministic. no errors in console.

ocombe commented 8 years ago

if you're using lazy loaded stuff in a template, you need to $compile it again after the lazy loading to make sure that angular maps it to the right functions / directives

dg14 commented 8 years ago

no, i'm not using into a template. i'm using it only into app.js

i'm using with sb-admin, in this way.

            $ocLazyLoadProvider.config({
                debug : false,
                events : true,
            });

 $stateProvider.state(
                 }).state('name_of_state', {
                templateUrl : 'path_of_template',
                controller : 'NameOfController',
                resolve : {
                    loadMyFile : function($ocLazyLoad) {
                        $ocLazyLoad.load({
                            name : 'name_of_controller',
                            files : [ 'path_of_controller' ]
                        });
                        return true;
                    }
                }
nkanand4 commented 8 years ago

@dg14 from within loadMyFile, you should be returning the $ocLazyLoad.load returned promise instead of your "return true"?