controller undefined in named views

Question

Following works perfect. In my application file app.js, i have states like

.state('nna.home',
{
    url: '/home',
    views: {
        templateUrl: 'views/home.html'                
    }
})

//home.html is like

<script src="../controllers/home.js"></script>
<div class="container cf" ng-controller="home">

// my home.js is included correctly in all cases have code like
alert(2); // works
app.controller('home', function ($scope) {
    alert(2); // works
});

But as soon as I try to use named views like following. It stops routing

.state('nna.home', {
    url: '/home',
    views: {
      'v1' : {
         templateUrl: 'home.html',
         controller: 'home',
         resolve: {
            deps: function ($ocLazyLoad) {
              return $ocLazyLoad.load('homecontroller.js');
            }
          }
      },
    }



// my home.js is included correctly in all cases have code like
alert(2); // works
app.controller('home', function ($scope) {
    alert(2); // Does not work
});

Plunker

I can use them fine as long as i load all controller files in index but i want to load controllers only with views not all the way in index

Probably the issue is with my understanding about named views, but i am stuck to know the reason that why the home is undefined even when i can show with alert that file had been successfully added

There is a clear explanation: http://stackoverflow.com/a/33139917/1679310. And also here http://stackoverflow.com/a/33119575/1679310 — Radim Köhler, May 10 '16 at 05:24
@RadimKöhler, Sorry but I could get nothing like clear from the two answers, regarding my question. And the question asks how to include/reference separate controller.js file that would have scope limited to that view only, when using named views — Sami, May 11 '16 at 15:58
I created a plunker (working one) with your scenario. Find it in the answer section, hope it helps a bit — Radim Köhler, May 11 '16 at 17:07

score 0 · Answer 1 · answered May 09 '16 at 22:41

0

Try this:

   .state('nna.home',
    {
        url: '/home',
        views: {
            'v1': {
                templateUrl: 'views/home.html',
                controller: 'home'
            }
        }
    })

answered May 09 '16 at 22:41

olysachok

311
2
8

No Sorry.. Same Error – Sami May 10 '16 at 14:24

score 0 · Answer 2 · answered May 11 '16 at 17:06

There is a working plunker

These could be the states:

.state('nna', {
    template: '<div ui-view="v1"></div>',
})
.state('nna.home', {
    url: '/home',
    views: {
      'v1' : {
         templateUrl: 'views/home.html',
         controller: 'home',
      },
    }
});

And these links are working now:

<a href="#/home">
<a ui-sref="nna.home">

Check it in action here

controller undefined in named views

2 Answers2