Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS Two directives with the same module name

Tags:

angularjs

Is it possible to create two directives with the same module name? Having this two files

angular.module('fabTemplate', [])
    .directive('fabGallery', [function () {
....

and

angular.module('fabTemplate', [])
    .directive('fabVideo', [function () {
...

The second directive will not be recognised.

<fab-video />

does not render anything. By changing the module name works though.

AngularJS's documentation says that the parameter name (first param of module "method")

The name of the module to create or retrieve.

I suppose that should work then... :S Angular doesn't print anything into the console

like image 326
ianaz Avatar asked Nov 19 '13 16:11

ianaz


People also ask

Can we use multiple directives in AngularJS?

... is quite illustrative as AngularJS doesn't allow multiple directives (on the same DOM level) to create their own isolate scopes. According to the documentation, this restriction is imposed in order to prevent collision or unsupported configuration of the $scope objects.

Can we have multiple modules in AngularJS?

Yes, you can define multiple modules in angularJS as given below. The modularization in AngularJS helps us to keep the code clarity and easy to understand, as we can combine multiple modules to generate the application.

What is templateUrl in AngularJS?

templateUrl can also be a function which returns the URL of an HTML template to be loaded and used for the directive. AngularJS will call the templateUrl function with two parameters: the element that the directive was called on, and an attr object associated with that element.

What does $compile do in AngularJS?

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

What are the built-in directives in angular?

AngularJS has a set of built-in directives which offers functionality to your applications. AngularJS also lets you define your own directives. AngularJS directives are extended HTML attributes with the prefix ng-. The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data.

What is nG-model in AngularJS?

AngularJS Directives. AngularJS directives are extended HTML attributes with the prefix ng-. The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. Read about all AngularJS...

How do I inject code into an angular component?

One can also create a custom directive which can be used to inject code in the main angular application. Custom directives can be made to call members defined in the scope object in a certain controller by using the ‘Controller’, ‘controllerAs’ and ‘template’ keywords.

What is compiling in AngularJS?

For AngularJS, "compilation" means attaching directives to the HTML to make it interactive. The reason we use the term "compile" is that the recursive process of attaching directives mirrors the process of compiling source code in compiled programming languages. Matching Directives


1 Answers

If you want to retrieve a module, then you must use only the first param of angular.module().

From the docs:

requires (optional) [Array.] : If specified then new module is being created. If unspecified then the the module is being retrieved for further configuration.

Your code should be something like:

//Module definition:
angular.module('fabTemplate', []);

//Get the module and add the first directive:
angular.module('fabTemplate').directive('fabGallery', function () {});

//Get the module and add the second directive:
angular.module('fabTemplate').directive('fabVideo', function () {});
like image 50
rvignacio Avatar answered Oct 15 '22 23:10

rvignacio