在AngularJS中单独计算单击

Question

＆＃13;

＆＃13;

var app = angular.module('app', []);
app.directive("eventsEvaluation", function() {
  return {
    restrict: "E",
    template: "<div>" +
      "<span class='span' type='number' data-ng-bind='number'></span>" +
      " <a class='btn btn-default' href='#' data-ng-click='reduce()'><span class='glyphicon glyphicon-minus'></span></a> " +
      " <a class='btn btn-default' href='#' data-ng-click='increase()'><span class='glyphicon glyphicon-plus'></span></a> " +
      "</div>",
    replace: true,
    transclude: false,
    controller: function($scope) {
      $scope.number = 0;
      $scope.increase = function() {
        $scope.number++;
      };
      $scope.reduce = function() {
        $scope.number--;
      };
    },
  }
});

＆＃13;

span.span {
  width: 40px;
  height: 40px;
  display: block;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-left: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container" data-ng-app="app">
  <form>
    <h3>Like or dislike</h3>
    <div class="row">
      <div class="col-md-4">
        <events-evaluation data-ng-model="number">
        </events-evaluation>
      </div>
    </div>
    <h3>Like or dislike</h3>
    <div class="row">
      <div class="col-md-4">
        <events-evaluation data-ng-model="number">
        </events-evaluation>
      </div>
    </div>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

我想代码喜欢/不喜欢系统，但我无法解决所有问题。 第一：如何使Angular中的$this像jQuery一样，因为看起来，如果我在第二个加号中点击加号也会被点击。我想单独点击两个div。

第二：如何只使用一次点击加或减（范围点击将为1）

Answer 1

您的两个ng模型都引用相同的$ scope。尝试在ng-model中给出不同的$ scope。如下。

＆＃13;

＆＃13;

var app = angular.module('app', []);
app.directive("eventsEvaluation", function () {
return {
restrict: "E",
template:
"<div>" +
"<span class='span' type='number' data-ng-bind='number'></span>" +
" <a class='btn btn-default' href='#' data-ng-click='reduce()'><span class='glyphicon glyphicon-minus'></span></a> " +
" <a class='btn btn-default' href='#' data-ng-click='increase()'><span class='glyphicon glyphicon-plus'></span></a> "+ 
"</div>",
replace: true,
transclude: false,
controller: function ($scope) {

$scope.quetions = [      
      {ques:"Angular 2 is same as react js?", qno : 1},
      {ques:"What is Angular 2?", qno : 2}
    ]

$scope.number = 0;
$scope.increase = function () {
$scope.number++;
};
$scope.reduce = function () {
$scope.number--;
};
},
}
});

＆＃13;

span.span
{
width:40px;
height:40px;
display:block;
font-size:20px;
font-weight:bold;
text-align:center;
margin-left:20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container" data-ng-app="app">
<form>
<div class="row">
<h2>See here:</h2>
<div ng-repeat="q in quetions">
<events-evaluation class="col-md-6" data-ng-model="q.qno">
</events-evaluation>
<p class="col-md-6">{{q.ques}}</p><br>
</div>
</div>


<h2>See yours:</h2>
<h3>Like or dislike</h3>
<div class="row">
<div class="col-md-4">
<events-evaluation data-ng-model="number">
</events-evaluation>
</div>
</div>
<h3>Like or dislike</h3>
<div class="row">
<div class="col-md-4">
<events-evaluation data-ng-model="number">
</events-evaluation>
</div>
</div>


</form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

值应由外部控制器控制，而不是指令。

我添加了一个按钮＆＃39; Log Values＆＃39;记录外部控制器值的更改。

＆＃13;

＆＃13;

var app = angular.module('app', []);
app.controller('MyController', function($scope) {
  $scope.number1 = 1;
  $scope.number2 = 0;
  $scope.log = function(){
    console.log($scope.number1, $scope.number2);
  }
});
app.directive("eventsEvaluation", function() {
  return {
    restrict: "E",
    template: "<div>" +
      "<span class='span' type='number' data-ng-bind='value'></span>" +
      " <a class='btn btn-default' href='#' data-ng-click='reduce()'><span class='glyphicon glyphicon-minus'></span></a> " +
      " <a class='btn btn-default' href='#' data-ng-click='increase()'><span class='glyphicon glyphicon-plus'></span></a> " +
      "</div>",
    replace: true,
    transclude: false,
    scope: {
      value: '=',
    },
    replace: true,
    link: function($scope, elem, attr, ctrl) {

      $scope.increase = function(val) {
        $scope.value++;
      };
      $scope.reduce = function(val) {
        $scope.value--;
      };

    }
  }
});

＆＃13;

span.span {
  width: 40px;
  height: 40px;
  display: block;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-left: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container" data-ng-app="app">
  <form ng-controller="MyController">
    <h3>Like or dislike</h3>
    <div class="row">
      <div class="col-md-4">
        <events-evaluation value="number1">
        </events-evaluation>
      </div>
    </div>
    <h3>Like or dislike</h3>
    <div class="row">
      <div class="col-md-4">
        <events-evaluation value="number2">
        </events-evaluation>
      </div>
    </div>
    <button type="button" ng-click="log()">Log Values</button>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;