CODEWITHSUNDEEP
javascriptangularjs
on3al
on3al

Reputation: 2140

Angular.js Custom Directive applied to only the first custom element

I'm trying to learn angular, but I've run in to a problem I don't quite understand using a custom directive.

I have a simple controller:

eventsApp.controller('PanelLayoutController',
function PanelLayoutController($scope){
   $scope.rows = 2;
   $scope.cols = 0;

   $scope.addRow = function()
   {
       if($scope.rows < 8)
       {
           $scope.rows++;
       }
   };
   $scope.removeRow = function()
   {
       if($scope.rows > 1 )
       {
            $scope.rows--;
       }
   };

    $scope.addCol = function()
    {
        if($scope.cols < 8)
        {
            $scope.cols++;
        }
    };
    $scope.removeCol = function()
    {
        if($scope.cols > 1 )
        {
            $scope.cols--;
        }
    };

  }
 );

A custom directive:

eventsApp.directive('upvote', function(){
    return{
        restrict:'E', // restrict to Element
        templateUrl:'/templates/directives/upvote.html',
        scope:{
            upvote:"&", // & binds local scope to function in parent scope
            downvote:"&",
            count:"@",
            title:"@"
        }
    }
});

And an html template (/templates/directives/upvote.html)

<div class="span0 well votingWidget">
    <p class="well-title">{{title}}</p>
    <div class="votingButton" ng-click="upvote()">
        <i class="icon-chevron-up icon-white"></i>
    </div>
    <div class="badge badge-inverse">
        <div>{{count}}</div>
    </div>
    <div class="votingButton" ng-click="downvote()">
        <i class="icon-chevron-down"></i>
    </div>
</div>

In my main html page:

<div ng-controller="PanelLayoutController">

      <upvote upvote="addRow()" downvote="removeRow()" count="{{rows}}" title="Rows"/>

      <upvote upvote="addCol()" downvote="removeCol()" count="{{cols}}" title="Cols" />

    </div>

The first upvote element (Rows) displays fine, however the second element and noting after that is rendered.

Does this have anything to do with using an isolated scope on my directive and having two elements using the same directive?

Upvotes: 0

Views: 486

Answers (1)

rajasaur
rajasaur

Reputation: 5470

You cannot use self-closing html elements. Try this fiddle http://jsfiddle.net/HQ6ee/

The only change I made is this: Instead of 

<upvote .... />

I changed to

<upvote ...></upvote>

Related issue in Angular Bug Stream: https://github.com/angular/angular.js/issues/1953

Upvotes: 3

Related Questions