AngularJS: Wrapping Directives and passing the attributes

Question

I am looking for a way to extend or wrap a third-party directives html with Angular 1.5.

Given a directive

<lib-input></lib-input>

I want to create a directive <my-lib-input> which renders the following HTML:

<div> <my-directive></my-directive> <lib-input ng-if="vodoo()"></lib-input> </div>

Which is supposed to be used in the same way as the original directive.

Example

To use my directive in the same way as the original, i need to move all attributes to a specific node of my template:

<my-lib-input ng-model="model" ng-change="ctrl.onChange()"></my-lib-input>

should generate:

<div> <my-directive></my-directive> <lib-input ng-if="vodoo()" ng-model="model" ng-change="ctrl.onChange()"></lib-input> </div>

However angular applies all the attributes to the root-node (here: the div) by default.

Question

How do I apply all parameters/ attributes which are passed to my directive to a specific node of the template?

I would like to prevent hardcoding a list of available parameters in my directive like:

restrict: 'E', scope : { ngModel: '=', ngChange: '&', ... }

Yogesh Patil · Accepted Answer · 2017-04-27 12:54:59Z

You can have chaining of scope parameters like Working JSFiddle here

var myApp = angular.module('myApp',[]); myApp.controller('myCtrl', function($scope) { $scope.input = 'LibInput'; $scope.changeInput2 = function(i2) { $scope.myInputs.setInput2(i2); } //this is releaving module which have getters and setter and variables can be hidden from outside scope. var getInputData = function() { var input1 = 'Input1'; var input2 = 'Input2'; return { getInput1 : function() { return input1; }, getInput2 : function() { return input2; }, setInput1 : function(i1) { input1 = i1; }, setInput2 : function(i2) { input2 = i2; } } } $scope.myInputs = getInputData(); }); myApp.directive('libInput', function() { return { restrict : 'E', scope : { input : '=' }, template : '<div>{{input}}</div>' } }); myApp.directive('myLibInput', function() { return { restrict : 'E', scope : { input : '=', myDirInput : '=' }, template : '<my-dir other-input="myDirInput"></my-dir>\ <lib-input input="input"><lib-input>' } }); myApp.directive('myDir', function() { return { restrict : 'E', scope : { otherInput : '=' }, template : '<div>{{otherInput.getInput1()}}</div>\ <div>{{otherInput.getInput2()}}</div>' } });

Thanks, but this is exactly what i would like to avoid since i would need to specify every single scope parameter which might be passed to an input-directive. Not just because it is a "long" list, but because my directive would not be compatible with anything that i did not anticipate (for example functionalities that might be added in future updates).
You can require your parent directive's controller to get the list of parameters. If you want, i can update the answer.

Collectives™ on Stack Overflow

AngularJS: Wrapping Directives and passing the attributes

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related