trouble passing argument from directive to controller

Question

Im having issues with passing an argument from a directive to a controller. The argument "compoundID" keeps coming back undefined. Im using angular js. I plan to have more then one of the directives per page.

JS:

angular.module('ireg').directive('compound', function () {
return {
    restrict:'E',
    scope:{             
        compoundID:'='
    },
    templateUrl: '/ireg/components/compound/compound.html'
};
});

angular.module('ireg').controller("compoundController",['$scope','$attrs','compoundService', function($scope,$attrs,compoundService ){
    var vm = this;
    vm.compoundID = $attrs.compoundID;
    console.log($attrs);
}]);

HTML:

<div class = "compound-view" ng-controller = "compoundViewController as controll" > 
<compound compoundID="{{controll.compoundID}}"></compound>{{controll.compoundID}}
<div = "studies" ng-repeat="study in controll.studies">
    <studie studyID="{{study.ID}}"></studie>
</div>
<cro croID= "{{croID}}"></cro>

Answer 1

If you're declaring scope like this:

scope:{             
    compoundID:'='
},

You're simply telling that the compoundID attribute should be treated as a model to be automatically parsed by Angular. You should use the model directly, so instead of:

<compound compoundID="{{controll.compoundID}}">

write:

<compound compoundID="controll.compoundID">

If you wanted to write <compound compoundID="{{controll.compoundID}}"> , your scope should be declared like this instead:

scope:{             
    compoundID:'@'
},

Also mind that Angular translated aSampleAttribute ("camel case") in your directive's definition to a-sample-attribute (em… "kebab case"??) to be used in html. So I think that if you have compoundID in directive you may have to write <compound compound-id="………"> .

I know it's nasty, so I'd suggest you use sth like compoundId => compound-id instead.