Angular.js自定义指令仅应用于第一个自定义元素

Question

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?

Answer 1

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