2

In My angular JS application i have 2 pages using same functionality and i am trying to use abstract controller and i am getting 'Base Ctrl is not defined' error from Summary Ctrl.

am I missing anything...

Markup 

<div ng-controller="MainCtrl">
   <div ng-controller="SummaryCtrl">{{name}}</div>
   <div ng-controller="SearchCtrl"></div>
</div>

MaintCtrl.js

 define(['tabs/module'], function (module) {
   'use strict';
   module.controller('MainCtrl', ['$scope', function ($scope) {
    //some code;
   }]);
   function BaseCtrl($scope) {
     $scope.name="test";
   }
});

SummaryCtrl.js

 define(['tabs/summary/module'], function (module) {
   'use strict';
   module.controller('SummaryCtrl', ['$scope', function ($scope) {
    BaseCtrl($scope);
    //child actions`enter code here`
      $scope.name = 'Clicked from base controller';      
   }]);
});
svp
  • 495
  • 1
  • 12
  • 26
  • Your question is a bit unclear to me. But it doesn't look like BaseCtrl is abstract in your example... if anything you've created something which smells like its (or should be) a service? (Then you'd need to inject it as well. You're just implicitly calling BaseCtrl, which breaks convention) Please correct my if I'm wrong... or are you able to provide more details on what you'd like to achieve? – Rohan Büchner May 13 '14 at 07:03
  • I have modified my code above.I am trying to create a BaseCtrl which is a abstract controller and use it in SummaryCtrl and i get BaseCtrl is not defined error. – svp May 13 '14 at 07:18

1 Answers1

1

It looks to me like you're using this code as your example:

Angular: Extending controller

I'm still not 100% sure what your problem is, but it seems to me like it could be that in this sample you've supplied, both the code pieces are in the same file. When you do separate it into separate files, make sure when you bootstrap or add your *.js file references.. make sure you add base before the others that are 'dependent' on it

EG

<script language="javascript" src="someUrl/BaseCtrl.js"></script>
<script language="javascript" src="someUrl/SummaryCtrl.js"></script>

EDIT:

Your issue could be with RequirejJS

Have a look at

http://solutionoptimist.com/2013/09/30/requirejs-angularjs-dependency-injection/

Your MainModule is registered in 'tabs/module', but nowhere are you supplying SummaryCtrl any of its dependencies.

EG. SummaryCtrl is not implicitly aware of 'tabs/module', as it's in 'tabs/summary/module'

Try adding this to summary:

 define(['tabs/summary/module', 'tabs/module'], function (module, BaseCtrl) {
   'use strict';
   module.controller('SummaryCtrl', ['$scope', function ($scope) {
    BaseCtrl($scope);
    //child actions`enter code here`
      $scope.name = 'Clicked from base controller';      
   }]);
});
Community
  • 1
  • 1
Rohan Büchner
  • 5,333
  • 4
  • 62
  • 106
  • Thank you and yes it look more like requirejs dependency issue.if i place my function in tabs/module and controller in that module can only use it and not in the controllers in other modules.What is best practise to use angualrjs abstraction using requirejs whether to use it as function or use it as separate js file? – svp May 13 '14 at 22:20
  • I have tried the second option of adding dependency of tabs/module to summary now i get 'undefined is not a function' in SummaryCtrl. – svp May 13 '14 at 22:45
  • Thank you and i have resolved it with your solution.Created abstract function called BaseCtrl and injected the BaseCtrl to SummaryCtrl and can call the methods from it. – svp May 14 '14 at 05:39