CODEWITHSUNDEEP
javascripthtmlangularjs
Milan Melman
Milan Melman

Reputation: 93

AngularJs: nested directives in separate js files

HTML page contains directive "A" with its javascript file included in the HEAD.

I am trying to use directive "B" inside directive "A", but can't figure out how to reference javascript file to directive "B" from directive "A"

Upvotes: 0

Views: 322

Answers (1)

MacKentoch
MacKentoch

Reputation: 2446

Declare all your files in your page (here html). - app - controllers - directives - etc...

Then angular will understand if you inject B in A.

Only module explicitly used in html (ex ng-controller="myctrl") will be loaded by angular on that page. Even if you declare (by <script tag) 10 files (js) of 10 controllers. The only loaded will be myctrl.

example :

I got an app in 1 file and I inject 1 controller from another file :

  //myApp.js
var ngwfApp = angular.module('myApp', [     'controller1_module',
                                            function () {
   //verbose init is ok
   console.log('--> INIT : Hello application :  \'\'myApp\'\' ');
}]);

   //ctrl1.js
  var ctrl1 = angular.module('controller1_module', []);
  ctrl1.controller('myController1NameOnHtml', ['$scope', function ($scope) {
    //verbose
    console.log('--> INIT : Hello controller  \'\'myController1NameOnHtml\'\' ');
}]);

 //and so on for all files you need

In my html :

    <!-- angular app -->            
    <script type="text/javascript" src="/_PATH_/myApp.js"></script>

    <!-- angular controller -->
    <script type="text/javascript" src="/_PATH_/ctrl1.js.js"></script>

Upvotes: 1

Related Questions