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
– JoseM, Commented May 6, 2014 at 13:44
Wait, can you show us your html? I have a feeling that you aren't using this the right way. — JoseM
– JoseM, Commented May 6, 2014 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
– Neel, Commented May 6, 2014 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
– Marc Kline, Commented May 6, 2014 at 14:27
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
– user1005240, Commented Aug 26, 2014 at 13:00

Mosh Feu · Accepted Answer · 2016-04-11 10:40:04Z

30

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, 2016 at 10:40

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

answered Jun 3, 2015 at 7:01

Shashank Singh

5538 silver badges12 bronze badges

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

2 Comments

Void Over a year ago

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.

Nate Anderson Over a year ago

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

Collectives™ on Stack Overflow

Adding Multiple 'require' Options for Angular Directive

EDIT:

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT:

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related