AngularJS: Initialize a controller for each directive

Question

I'm trying to create a directive 'pForm' so that I can easily create instances of forms inside of html pages via tags:

<p-form></p-form>

Each form will consist of the template: templates/form.html connected to an instance of the controller 'form' in the module 'forms'.

With that said, here's how I tried to approach it:

Main Module (in dependencies - forms module):

angular.module('mainModule', ['forms'])

.controller('MainController', ['$scope', function($scope) {

}]);

Forms Module:

angular.module("forms", [])

.controller("form", ['$scope', function($scope) {
    alert("init");
}])

.directive('pForm', function() {alert('directive');
    return {scope: {data: '=data'}, templateUrl: 'templates/form.html'};
});

The html file inits ng-app="mainModule", and I place in the html's body the following:

<p-form></p-form>

the alert 'directive' works, but the controller is not instantiated (no "init" alert).

I imagine I got the concept of directives somewhat backwards. Please let me know what you think.

Jason · Accepted Answer · 2014-12-03 16:53:54Z

1

change your directive to this:

.directive('pForm',function(){alert('directive');
return {
    scope:{
       data: '=data'
    },
   templateUrl:'templates/form.html',
   controller: 'form'
};
});

that will associate the controller to the directive

answered Dec 3, 2014 at 16:53

Jason

1,37616 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jason Over a year ago

Also, remove the alert('directive'). that may be causing an issue. If you want to verify it is being instantiated you can add this to the return statement: link:function(scope,element,attrs){alert('directive');}

user3603310 Over a year ago

On plunkr everything worked as expected. plnkr.co/edit/RTMEgZg20A1XhyjVBkgZ?p=preview I can ZIP the isolated problem for you, would you be able to go over it?

Jason Over a year ago

yep, go ahead and zip it up

user3603310 Over a year ago

Obviously it was something stupid, old angular version. Thanks for the help :)

Collectives™ on Stack Overflow

AngularJS: Initialize a controller for each directive

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related