Question

我正在尝试创建一个Spinner，

我在AngularJS中有一个自定义指令

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

.directive('spinner', function() {
  return {
    restrict: 'EA',
    scope: {
      jump:'=jump'
    },
    link: function (scope, element, attrs) {
      scope.jump = 0;

      scope.spinning = function(action) { 
        var jumps = document.getElementById("jumps").value;
        var spinn = document.getElementById("spinn").innerText;
        var convt = Number(spinn);
        var jumpconvt = Number(jumps);
        if(jumps === '' && action === "add") {

          convt= convt +1;
        }
        else if(jumps === '' && action === "sub") {

          convt= convt - 1;

        }
        else if(jumps !== '' && action === "sub") {
          convt = convt - Number(jumps);

        }
        else{
          convt =  jumpconvt + convt;
        }

        document.getElementById("spinn").innerHTML = convt;

      };
    },
    templateUrl: 'spinnerDirective.html'
  };
});

spinnerDirective.html中的

将包含

<div>
  <div> Jumps: <input type='text' id="jumps" ng-model='count'/> </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;">
      <span id="spinn" style="background-color: #fff;font-size:18px;">{{jump}}</span>
    </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>

将呈现为：

<div>
  <div>Spinner</div>
  <div style="float: left;">
    <spinner jump="jump"></spinner>
  </div>
  <div style="float: left;">
    <spinner jump="jump"></spinner>
  </div>
</div>

问题是：如果我使用一个微调器，它可以正常工作。但是当我有多个微调器时它不起作用，当我点击第二个微调器中的+或-按钮时，第一个微调器中的计数会发生变化。

结果应该是：on +或-而不在文本框中给出任何值，值应该增加或递减1，并且通过在textbox中给出值应该通过textbox值添加或减去

当我点击第一个Spinner上的+或-按钮时，更改应仅在第一个微调器中发生，当我点击第二个+或-按钮时微调器更改应仅在第二个微调器中发生。

我在指令中尝试过隔离范围，但仍无效果。

这是我的代码（编辑）：Plunker

请有人指导我如何正确行事。

提前致谢。

AngularJS自定义指令隔离范围不起作用

0 个答案: