AngularJS pass variable to directive

Question

I have to make some directive in an AngularJS app and I need to pass variables from my controller to the directives.

The problem is that I have to use a directive syntax who is not common for me, and I don't know where I have to declare my variable in the directive with this syntax.

Here is my directive :

angular
.module('thermofluor')
.directive('tablePlate', tablePlate)

tablePlate.$inject = ['$timeout', '$q'];

function tablePlate( $timeout, $q )
{
var directive = {
    link: link,
    restrict: 'E',
    template: '<h1>TEST</h1>'
};

return directive;

function link(scope, element ) {

    return;

}

}

Anyone have an idea ?

Thanks.

Yes my directive is used inside a controller, but how I use the parent scope ? When I try to show the scope inside the link function it show undefined — Spialdor
– Spialdor, Commented Jul 2, 2018 at 7:33
can you explain what do you want to do with a directive? do you have an example of code without directive? you'll use directives to make reusable components and remove repeated codes (js+html) — FarukT
– FarukT, Commented Jul 2, 2018 at 7:34
I want a directive to create a table of checkbox (12x8) who are activate or desactivate in function of an array of values. My checkboxes will be named in function of their column and line (for example : A1, A2, A3, ...) and in my array I have the name of the checkboxes and the string "activate" or "desactivate" — Spialdor
– Spialdor, Commented Jul 2, 2018 at 7:38

FarukT · Accepted Answer · 2018-07-02 08:03:28Z

2

// see this example of code to understand ho to use directives

// directive example
angular.module('thermofluor').directive('tablePlate', function(){
return {
    restrict: 'E',
    scope: {
        arrayOfChecks: '='
    },
    template: '<h1>TEST</h1>' + htmlTable,
    link:  function(scope, element, attrs, ctrl){

    }
}
});

var htmlTable = 
'<table>' +
'   <tr>' +
'       <th>Name</th>' +
'       <th>Value</th>' +
'       <th>Active</th>' +
'   </tr>' +
'   <tr ng-repeat="c in arrayOfChecks">' +
'       <td>{{c.name}}</td>' +
'       <td>{{c.value</td>' +
'       <td><input type="checkbox" ng-model="c.active"></td>' +
'   </tr>' +
'</table>';

// controller
angular.module('thermofluor').controller('myController',  function(){
$scope.myListOfChecks = [{name: 'A', value:'A value', active: false},
                    {name: 'B', value:'B value', active: true},
                    {name: 'C', value:'C value', active: false},
                    {name: 'D', value:'D value', active: true}];
});

// html

<div class="row" ng-controller="myController">

<table-plate array-of-checks="myListOfChecks"></table-plate>

</div>

answered Jul 2, 2018 at 8:03

FarukT

1,66814 silver badges26 bronze badges

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

3 Comments

Spialdor Over a year ago

Thanks, and if I want to modifiy some values with the link function, how can I do that ? When I try to use scope.arrayOfChecks it return me a $$state object

FarukT Over a year ago

add this lines // on table <th>Button</th> <td><button ng-click="editValue(c)">Edit Value</button></td> // this code in directive link: function(scope, element, attrs, ctrl){ scope.editValue = function(selectedRow){ selectedRow.value = 'New Value'; } }

FarukT Over a year ago

@Jessy did you try it?

Collectives™ on Stack Overflow

AngularJS pass variable to directive

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related