Controller is loaded but the scope returns undefined- oclazyload with jade

[LacieNat]

Hello I am a beginner in angular and oclazyload so I'm not sure why my code isn't working

app.js

var kitApp = angular.module('kitApp', [
            'oc.lazyLoad',
            'ui.router'
        ]);

    kitApp.config(['$stateProvider','$ocLazyLoadProvider', '$urlRouterProvider',
        function($stateProvider, $ocLazyLoadProvider, $urlRouterProvider) {

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


            $stateProvider
              .state('homepage', {
                url:'/',
                templateUrl: '/homepage',
                controller: "HomePageCtrl as ctrl",
                resolve: {
                    deps: function ( $ocLazyLoad ) {
                        return $ocLazyLoad.load("/javascripts/controllers/homepage/homePageCtrl.js");
                    }
                 }
            });

              $urlRouterProvider.otherwise("/");

and homePageCtrl.js:

angular.module("kitApp").controller("HomePageCtrl", ['$scope', function($scope) {
    $scope.variable="HELLO";
}]);

homepage.jade:

extends layout

block content
    div#main-container
        div(id="main-container-header", class="row")
            div(class="row" style="height: 40px")
                div(class="col-lg-12 col-md-12 col-sm-12 col-xs-12" )
            div(class="row")
                div(id="header-title" class="col-lg-7 col-md-8 col-sm-7 text-align-right") 
                    span(class="text-align-bottom") .Illustrations.Concept Art.Ink

                div(id="contact" class="col-lg-5 col-md-4 col-sm-5") 
                    div(id="name" class="row")
                        div(class="col-lg-12 col-md-12 text-align-right") My Name {{variable}}
                    div(id="email" class="row")
                        div(class="col-lg-12 col-md-12 text-align-right") [email protected]

layout.jade:

html(ng-app="kitApp")
    script(src="/javascripts/d3/d3.js")
    script(src="/javascripts/d3/box.js")
    script(src="/javascripts/jquery.js")
    script(src="/javascripts/bootstrap/js/bootstrap.js")
    script(src="/javascripts/angular.min.js")
    script(src="/javascripts/angular-ui-router.js")
    script(src="/javascripts/angular-route.js")
    script(src="/javascripts/ocLazyLoad.js")
    script(src="/javascripts/stateProvider.js")
    script(src="/javascripts/kitApp.js")

    head
        title="title"
        link(rel='stylesheet', href='/stylesheets/style.css')
        link(rel='stylesheet', href='/javascripts/bootstrap/css/bootstrap.css')
        link(rel='stylesheet', href='/javascripts/bootstrap/css/bootstrap-theme.css')

    body
        section(ui-view)
            block content

The loading seems to be fine because oclazyload debug said that everything is loaded successfully.

However I can't render {{variable}} in the browser. It just turns out to be undefined. Seems like the $scope is not attached

Thanks!

[ocombe]

Hello,

since you're loading the controller with the syntax "as": "HomePageCtrl as ctrl" then the variable in your view should we called with {{ ctrl.variable }}

And in your controller you should define it with this.variable="HELLO"; instead of using $scope :)

[LacieNat]

hmm.. i have tried that.. but it did not work too..

[ocombe]

Weird, can you make me a plunkr so that I can check?

[marcominetti]

Hi, I may have a similar problem... I'm actually using requirejs (so I've loaded ocLazyLoad.require.js) and I use

    $stateProvider.state('home', {
      url: '/home',
      templateUrl: 'home/static/html/home.html',
      resolve: {
        module: ['$ocLazyLoad', function($ocLazyLoad) {
          return $ocLazyLoad.load('home/module');
        }]
      }
    });

The home/module.js loads correctly all dependencies...

define([
 'angular',
 ...
 'home/controllers/home.controller.js'
], function(){
});

The template home/static/html/home.html just uses the controller...

<div ng-controller="homeController">{{test}}</div>

While the controller implementation in home/controllers/home.controller.js is just...

define([
  'angular'
], function(){
  angular.module('...').controller('homeController', function($scope){
    $scope.test = 'hello';
  });
});

Everything loads correctly, the template is rendered (the controller is found and instanced) but the expressions are not evaluated...

PS: I'm using ui-router...

[marcominetti]

From example above, if I use lazyLoad just the controller with

    $stateProvider.state('home', {
      url: '/home',
      templateUrl: 'home/static/html/home.html',
      resolve: {
        module: ['$ocLazyLoad', function($ocLazyLoad) {
          return $ocLazyLoad.load('home/controllers/home.controller');
        }]
      }
    });

Everything works fine (this is the reason why I suppose is something related to ocLazyLoad instead of ui-router)... but if I use an array of files to load, the problem occurs again...

[marcominetti]

@ocombe any hints to debug?

[marcominetti]

Solved... seems something related to ui-router... and jQuery/Bootstrap initialization within the $viewContentLoaded event... sorry @ocombe you can delete my comments if you prefer...

[ocombe]

No prob :)

[hlpupo]

Hi all, I'm using the service $ ocLazyLoad, and I have a problem with the $ scope and controller. Example.
This is My config: angular .module('sbAdminApp', [ 'oc.lazyLoad', 'ui.router', 'ui.bootstrap', 'angular-loading-bar' ]).config(['$stateProvider', '$urlRouterProvider', '$ocLazyLoadProvider', '$interpolateProvider', function ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider, $interpolateProvider) {

  $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
  $ocLazyLoadProvider.config({
    debug: false,
    events: true
  });
  $ocLazyLoadProvider.config({
    loadedModules: ['sbAdminApp'], modules: [
      {
        name: 'place',
        files: [
          path + 'bundles/rstaurant/js/admin/controllers/placeController.js'

        ]
      }
    ]
  })

  $stateProvider        
    .state('dashboard.place', {
      url: '/place',
      controller: 'PlaceController',
      templateUrl: path + 'bundles/rstaurant/view/place.html.twig',
      resolve: {
        loadModule: ['$ocLazyLoad', function ($ocLazyLoad) {
          return $ocLazyLoad.load('place');
        }]           
      }
    })
}]);

And my controller is: angular.module('sbAdminApp') .controller('PlaceController', function ($scope, $place, $uibModal, $log, $rootScope) { $scope.txt = "PlaceController";
}); Then, when I try to use this in my view not render the view. {{ txt }}

showing me only a string '{{ txt }}'.

I need you help

[parikshit999]

@marcominetti having same issues with my code. How you fixed it?