CODEWITHSUNDEEP
angularjs
nishant kumar
nishant kumar

Reputation: 83

multiple custom directives angularjs

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?

Upvotes: 0

Views: 1210

Answers (1)

sylwester
sylwester

Reputation: 16498

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'])

Upvotes: 3

Related Questions