Question

我正在尝试学习角度，但是我遇到了一个我不太明白使用自定义指令的问题。

我有一个简单的控制器：

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--;
        }
    };

  }
 );

自定义指令：

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:"@"
        }
    }
});

一个html模板（/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>

在我的主要html页面中：

<div ng-controller="PanelLayoutController">

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

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

    </div>

第一个upvote元素（Rows）显示正常，但是第二个元素会在呈现之后显示。

这是否与在我的指令上使用隔离范围并使用相同指令的两个元素有关？

Answer 1

您无法使用自动关闭的html元素。试试这个小提琴http://jsfiddle.net/HQ6ee/

我做的唯一改变是：而不是

<upvote .... />

我改为

<upvote ...></upvote>

Angular Bug Stream中的相关问题： https://github.com/angular/angular.js/issues/1953

Angular.js Custom Directive仅适用于第一个自定义元素

1 个答案: