Question

我创建了一个自定义指令，它是一个微调器。它正在研究ng-repeat，并且它在ng-repeat中没有工作。

这是我的 html

<body ng-controller="controller">
<div>

<div>Spinner</div>  

    <div spinner jump="jump"> </div>

    Spinner Value:- <span>{{jump}}</span>

    <div>inside ng-repeat</div>        
   <div ng-repeat="i in counter(4) track by $index" >{{$index+1}}_spinner{{$index.i}}
     <spinner result="jump" ng-model="jump"></spinner>

 </div>
</div>

JS

    var app = angular.module('plunker', [])

    .directive('spinner', function() {

        return {
            restrict: 'EA',

            scope: {
                result:'=jump'
            },

            link: function ($scope, $element, $attrs) { 

             $scope.result = 0;

             $scope.spinning = function(action) { 

              if(($scope.txtbox === '' || $scope.txtbox === undefined) && action === "add"){

                       $scope.result= Number($scope.result) +1;
                     }
              else if(($scope.txtbox === '' || $scope.txtbox === undefined) && action === "sub") {

                       $scope.result= Number($scope.result) - 1;

                     }
              else if($scope.txtbox !== '' && action === "sub")  {

                      $scope.result = Number($scope.result) - Number($scope.txtbox);

                          }
              else{ 

                $scope.result =  Number($scope.txtbox) +  Number($scope.result);

                        }
                    };
           },

            templateUrl: 'spinnerDirective.html',               
    };
})  
.controller('controller', ['$scope', function($scope) {     

$scope.counter = Array;
}]);

指令

<body>
    <div class="container">

    <div> Jumps: <input type='text' id="jumps" ng-model='txtbox'/></div>

    <div  style="float: left; width:120px; margin-top:10px;" >

    <div style="border-color: red;  border-style: solid; border-width: 1px 1px 1px 1px; margin-left: 10px; text-align: center; height: 30px; line-height: 2px;" >

     <label style="vertical-align: top;line-height: normal;"  ng-click="spinning('add');" >+</label>
    </div>

    <div style="margin-top: -12px; text-align: center; height:12px;margin-left: 7px;">

     <label id="spinn" style="background-color: #fff;font-size:18px;" >{{result}}</label>

   </div>

   <div style="border-color: red;  border-style: solid; border-width: 0 1px 1px 1px; margin-left: 10px; text-align: center; height: 30px;line-height: 27px;">

     <label style="vertical-align: bottom;line-height: normal;"  ng-click="spinning('sub');">-</label>

   </div>

   </div>    

    </div>
</body>

http://plnkr.co/edit/KPHqes1baju70oSYRdRp?p=preview 我需要我的内部ng-repeat微调器应该与外部ng-repeat微调器一样工作，并且必须分别显示每个微调器的值。

ng-repeat不能使用自定义指令

0 个答案: