CODEWITHSUNDEEP
angularjsdependency-injectionangular-directiveangular-controller
Gyanesh Gouraw
Gyanesh Gouraw

Reputation: 2021

Accessing directive from a different module

I have two different modules , first one contains controller second directive.

Basically i want the directive to be rendered in my view. But as modules for directiveandcontroller are different, its giving error.

If i give same module then it ressolves my issue by i want a generic module serving all controllers.

controller

angular.module('SlamModuleCtrl')
        .controller('SlambookExt',['$scope','$route','SlambookCollection', function($scope,$route) {
            console.log("slam controller")
        }]);

Directive

angular.module('Genericmodule')
    .directive('appVersion', ['version', function (version) {
       return {
    restrict: 'E',  
    template: '<h1>version1</h1>'
    } 
    }])

View

 <div ng-controller="SlambookExt">
     <app-version>1</app-version>
    </div>

Upvotes: 2

Views: 5856

Answers (2)

Chanthu
Chanthu

Reputation: 1794

When instantiating slamModuleCtrl, you need to specify genericModule as a dependency.

Or use a parent module that loads both those modules as dependencies and use that parent module as your ng-app.

angular.module('parentModule',['slamModuleCtrl','genericModue'])

This is just a plausible solution because both your modules look right to me. So I'm guessing that the version is not showing up because the module hasn't been loaded

Upvotes: 6

Jack
Jack

Reputation: 41

Chanthu is correct you need to specify a parent module that has dependencies on your other modules but you also pass a array of dependencies for your other modules, in this case they don't have any.

declare your modules and add them in to the parent module like so...

var controllerModule = angular.module('controllerModule', []);

var directiveModule = angular.module('directiveModule', []);


controllerModule.controller('mainController', function($scope) {
  $scope.hello = 'Hello';
})


directiveModule.directive('myDirective', function() {
  return {
    template: '{{hello}}'
  };
});

angular.module('app', ['controllerModule', 'directiveModule']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

<body ng-app="app" ng-controller="mainController">

  <my-directive></my-directive>

</body>

code snippet shows another module directive and uses the binding from another module controller

Upvotes: 2

Related Questions