Simple AngularJS directive with attributes is not working

Question

I have created simple directive with a few parameters passed, but my parameters are not passed to Template from Usage code. (they are not displayed on page, no error is displayed too). I also used '@' instead of '=' but there was no real improvement.

I just want to display my attribute parameters in my directive code:). Thanks for help.

Usage code:

<fine-faulty-directive fineCount='111' finePercentage='11' 
faultCount='222' faultPercentage='11'></fine-faulty-directive>

Directive code:

Application.Directives.directive('fineFaultyDirective', function () {
    return {
        restrict: 'E',
        templateUrl: 'src/Dashboard/Views/fine_faulty.html',
        //replace: true,
        scope: {
            fineCount: '=',
            finePercentage: '=',
            fauntCount: '=',
            faultPercentage: '='
        },
        link: function (scope, elem, attrs) {
            console.log(scope);

        }
    };
});

Simple templateURL:

{{faultPercentage}}%  - {{faultCount}}

do you have something in console.log ? does your template is well loaded ? does your directive is well loaded ? — t0mpl
– t0mpl, Commented Mar 17, 2015 at 14:26
In any case you should use the @ instead of the =. That should work fine. Your issue is that you need to define your attributes as fine-count, fine-percentage, etc. — Bas Slagter
– Bas Slagter, Commented Mar 17, 2015 at 14:30

Germagik · Accepted Answer · 2015-03-17 14:30:48Z

3

The attributes fineCount, finePercentage, faultCount, faultPercentage are normalized names (such as directive's name), so if you want to set it to the element, each attribute name must be fine-count, fine-percentage, fault-count, fault-percentage...

I hope I helped.

answered Mar 17, 2015 at 14:30

Germagik

562 bronze badges

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

Comments

Umer Hayyat · Accepted Answer · 2015-03-17 14:34:05Z

0

Because of

<fine-faulty-directive fineCount='111' finePercentage='11' 
faultCount='222' faultPercentage='11'></fine-faulty-directive>

AngularJS will translate finePercentage to finepercentage and fineCount to finecount

to avoid such circumstances, use fine-percentage instead of finePercentage and fine-count instead of fineCount

NOTE: all attribute which are camel cases in attribute should be separated with - or : so that you can get them camel case in your JS code.

answered Mar 17, 2015 at 14:34

Umer Hayyat

4061 gold badge5 silver badges13 bronze badges

2 Comments

m0meni Over a year ago

Your answer is wrong because it translates finePercentage to fine-percentage moreover there is already a correct answer written.

Umer Hayyat Over a year ago

AR7, BTW it will not translate on HTML side so on HTML it will be same as finePercentage, it will be translated in JS code i.e attrs of link function.

Collectives™ on Stack Overflow

Simple AngularJS directive with attributes is not working

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related