multiple custom directives angularjs

Question

I am trying to work out two custom directives form my code but none of them are getting rendered in my page. The relevant code pieces are:

(1) circular-checkbox-template.html ---->Template HTML

<div class="mlm-circular-checkbox clearfix">
<div class="roundedOne">
  <input type="checkbox"/>
  <label for="roundedOne"></label>
</div>

(2) mlm-checkbox-circular.js ---->Directive

angular.module('mlmApp')
   .directive('mlmCheckboxCircular', function() {
            return {
                template: 'views/circular-checkbox-template.html',
                restrict: 'E',
                transclude: false,
                /*
                scope: {
                    params: '=checkboxParams'
                },
                */
                link:function(scope, element, attrs) {

                }
            }
        });

(3) HTML file where I am trying to use the custom directive:

...
<td data-title="'Included'" style="text-align: center">
                        <input type="checkbox" ng-checked="{{report.reportData.isEntitled}}"></input>
                        <mlm-checkbox-circular></mlm-checkbox-circular> ----> First checkbox
                    </td>
                    <td data-title="'Compelling'" style="text-align: center">
                        <input type="checkbox" ng-checked="{{report.reportData.isShownAsCompellingEvent}}"></input>
                        <mlm-checkbox-circular></mlm-checkbox-circular> ----> Second checkbox
                    </td>
...

As of now none of the two checkboxes are appearing on my screen.

In order to inspect further, I worked on a JSFiddle http://jsfiddle.net/9Ymvt/2943/ Here I was working on two different types of custom directives which is also what I need in my page. But only one is appearing. If I remove one of the custom directives then the left out one appears. Can you please help me figure out how this is working and what is it that I am doing wrong?

I am sorry JB. That was a mistake from my end. I cross checked, the elements have their proper closing and opening tags. For your reference: <div class="mlm-circular-checkbox clearfix"> <div class="roundedOne"> <input type="checkbox"/> <label for="roundedOne"></label> </div> </div> — nishant kumar
– nishant kumar, Commented Jan 14, 2015 at 4:38

sylwester · Accepted Answer · 2015-01-13 23:46:57Z

Please see here http://jsfiddle.net/9Ymvt/2944/

You've got twice definition of 'components' module

angular.module('components', [])
    .directive('mlmCheckboxSemiCircular', function () {

                return {
                    restrict: 'E',
                    transclude: false,
                    template: '<div style="padding: 5px 5px 5px 5px"><div class="roundedOneSemi"><input type="checkbox"  value="None" id="roundedOne" name="check" /><label for="roundedOne" class="semi"></label></div></div>'
                }

    });


angular.module('components')
    .directive('mlmCheckboxCircular', function () {

                return {
                    restrict: 'E',
                    transclude: false,
                    template: '<div style="padding: 5px 5px 5px 5px"><div class="roundedOne"><input type="checkbox"/><label for="roundedOne"></label></div></div>'
                }

    });
angular.module('HelloApp', ['components'])

Thanks sylwester, for pointing out that and that corrected my fiddle, which I was working on to test my actual code and make it functional. My actual problem is with the code pieces that I have shared above.
Finally, I was able to fix this. I missed to include the files in the library. But thanks to you Sylwester, after your comment I was able to get this up and running.

Collectives™ on Stack Overflow

multiple custom directives angularjs

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related