Adding Multiple 'require' Options for Angular Directive

Question

Usually in Directives, I use require: 'ngModel' if I want to pass the scope to it. This works fine. But I am now creating a directive that creates 5 different HTML elements each with different ngModels that is passed from parent. The ngmodels that needs to be passed as attribute are ngModel1, ngModel2, ngModel3, ngModel4, ngModel5. How do I add multiple options in the require condition inside the directive?

I tried these and it doesnt work:

require: ['ngModel1', 'ngModel2', 'ngModel3', 'ngModel4', 'ngModel5'],

and

require: {'ngModel1', 'ngModel2', 'ngModel3', 'ngModel4', 'ngModel5'},

and

require: 'ngModel1', 'ngModel2', 'ngModel3', 'ngModel4', 'ngModel5',

and

require: 'ngModel1, ngModel2, ngModel3, ngModel4, ngModel5'},

How do I add multiple require options?

EDIT:

HTML code:

<div get-vehicles-checkbox
            cars-ng-model="formData.cars"           
            bikes-ng-model="formData.bikes"         
            trucks-ng-model="formData.trucks"           
            van-ng-model="formData.van"         
            bus-ng-model="formData.bus"     
></div>

Directive:

app.directive('getVehiclesCheckbox', function($compile) { 
  return {
    restrict: 'A',
    replace:true,
    // require: ?
    scope: {            
      carsNgModel: '=',
      bikesNgModel: '=',
      trucksNgModel: '=',
      vanNgModel: '=',
      busNgModel: '='
    },

    controller: 'SomeController',

    link: function(scope, element, attrs, carsNgModel, bikesNgModel, trucksNgModel, vanNgModel, busNgModel) {

      scope.carsNgModel = {},
        scope.bikesNgModel = {},
        scope.trucksNgModel = {},
        scope.vanNgModel = {},
        scope.busNgModel = {}

      var html = '<span ng-repeat="car in cars">' +
          '<input type="checkbox" ng-model="carsNgModel[car.code]"> {{ car.number }} {{ car.description }}' + 
          '</span>' +

          '<span ng-repeat="bike in bikes">' +
          '<input type="checkbox" ng-model="bikesNgModel[bike.code]"> {{ bike.number }} {{ bike.description }}' + 
          '</span>';

      //.... etc.. etc.....


      // COMPILE HTML
      //... .... ...

    }
  }
});

The docs say: `require: ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent']` — JoseM, May 06 '14 at 13:44
Wait, can you show us your html? I have a feeling that you aren't using this the right way. — JoseM, May 06 '14 at 13:47
Thanks @JoseM I have added a sample html and directive code in my question above. I know another method for me will be to have separate directive for each vehicle, but I want to have all in 1 to avoid redundancy. — Neel, May 06 '14 at 14:04
The `require` option doesn't provide scope access; it provides access to other directives' controllers. Since you seem to have everything inside of one directive, it seems unnecessary here. — Marc Kline, May 06 '14 at 14:27
aha... I fully misunderstood this then. I thought the require option puts a condition so that when adding the directive in view, we dont forget to add the necessary scope access for it. The reason why I misunderstood this is because when I saw a tutorial somewhere on isolated scope it showed `require: 'ngModel',` and then in scope it showed `ngModel: '='`. So I thought this is used to mention the required attribute for that directive. Hmm... — Neel, May 06 '14 at 15:28
Hi guys.. I am sorry, I am still a bit confused. I read the docs on directive and it made sense when I saw the example on how the directive is using another controller using `require`. However, when I saw other sample, I dont understand why `require: 'ngModel'` is used. See this for instance: http://suhairhassan.com/2013/05/01/getting-started-with-angularjs-directive.html#.U2kFrvmSw54 Under "Directive Definition Object" section, I think he is using the require to bind with the ngModel attribute isint it? So if require is usually used for dependent controllers, why is ngModel given in this? — Neel, May 06 '14 at 16:00
I read this and it makes sense now: http://stackoverflow.com/a/15691865/1050957 @JoseM was right. I was using `require` the wrong way. — Neel, May 07 '14 at 08:49
Although you misunderstood the reason for using the require feature, your question is still valid. I have the situation where i need access to multiple directive controller methods. I can access a method from a parent directive using the require like so: 'require:"^parentDirective"' but I also need to access a method within a seperate directive, the documentation says to use an array of strings like so: 'require:["^parentDirective","directiveTwo"]' but doing this causes errors although the both directives have been compiled to the DOM. Am I missing something here? — user1005240, Aug 26 '14 at 13:00
don't know if that helps, but 'require' option is good if you need access to some parent controller functions or variables. you are passing multipe data inside directive, why don't use watchGroup of all variables inside directive? http://stackoverflow.com/questions/11952579/watch-multiple-scope-attributes — Dmitri Algazin, May 21 '15 at 11:02

score 29 · Accepted Answer · edited Apr 11 '16 at 10:40

29

app.directive('myDirective', function() {
  return {
    restrict: "A",
    require:['^parentDirective', '^ngModel'], 
    link: function ($scope, $element, $attrs, controllersArr) {
      // parentDirective controller
      controllersArr[0].someMethodCall();

      // ngModel controller         
      controllersArr[1].$setViewValue(); 
    }
  }
});

edited Apr 11 '16 at 10:40

Mosh Feu

28,354
16
88
135

answered Jun 03 '15 at 07:01

Shashank Singh

543
8
12

2

By the way, adding a ? just after the ^ or ^^ will make the require "optional" and angular will not throw an error if it doesn't the required directive. All you need to do then is set an if() on the link's controller argument and you got an optional require. – Void Jul 11 '16 at 13:16
So I concluded, like seen in comments on the OP, they didn't really need `require`, is that true? – Nate Anderson Jun 25 '17 at 18:00

Adding Multiple 'require' Options for Angular Directive

EDIT:

1 Answers1