AngularJS : How to bind data to a Directive?

Question

I have a problem with this:

app.directive('myDirective', function(){
    return{
        retrict: 'EA',
        replace: false,
        scope:{
            fstData: '@',
            sndData: '@'
        },
        template: '<div ng-controller="myController" arg="{{fstData}}"><h3>{{sndData}}</h3><li ng-repeat="event in eventsCat"></li></div>' 
    }
});

When I create a my-directive tag in the HTML, it doesn't bind fstData but if I delete {{fstData}}, and I put something, it works.

I think that I can't binding in a tag that contains a ng-controller attribute, but I need this attribute (args) because in myController I use it.

Thanks!

In myController I have this:

app.controller('myController', function($scope, $attrs){
var myVar = myArray[$attrs.arg];

have you checked [this answer](http://stackoverflow.com/a/22575629/1431600)? — Evandro Silva, Dec 10 '14 at 11:57

score 0 · Accepted Answer · answered Dec 10 '14 at 11:53

0

Have you tried this approach?

app.directive('myDirective', function(){
    return{
            retrict: 'EA',
            replace: false,
            scope:{
                fstData: '@',
                sndData: '@'
                },
            link: function(scope ,element , attrs) 
            {
               var markup =  '<div ng-controller="myController" arg="'+scope.fstData+'"><h3>'+scope.sndData+'</h3><li ng-repeat="event in eventsCat"></li></div>' ;
               element.append(markup);
            }
    }
});

answered Dec 10 '14 at 11:53

KaustubhSV

328
4
15

Thanks! It works partially, because inside the li tag I have another directive that uses "event" to load data. When I did this changes the other directive doesn't work. – Emil Santurio Dec 10 '14 at 13:24
use $compile after appending the markup. It will re-compile that element and your directives will run – KaustubhSV Dec 19 '14 at 06:34

AngularJS : How to bind data to a Directive?

1 Answers1