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
      //... .... ...

    }
  }
});

Solution

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(); 
    }
  }
});

Comments

[JoseM]

The docs say: require: ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent']

[Marc Kline]

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.

[user1005240]

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?

[Void]

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.

[The Red Pea]

So I concluded, like seen in comments on the OP, they didn't really need require, is that true?