如何将值绑定到 angular js 中的指令 onclick

Question

我正在尝试创建一个书签指令，它允许用户第一次点击书签图标，颜色会随着值 1 变为蓝色，并且不允许再次点击。单击书签图标时，默认颜色（黑色）应更改为蓝色，指令也应绑定值 1.Default 值将为零。目前我无法将值设置为零（默认），也无法将 onclick 设置为 1，但颜色会改变。

这是我的代码：

var a=angular.module('Rating', []);
  a.controller('RatingCtrl', function($scope) {
  $scope.item = {
       bookmark: false
     };
    
    $scope.saveBookmark=function(value){
     
      
    }
  });
  
 a.directive('buttonBookmark', function() {
   return {
      scope: true,
      restrict: 'E',
      bookVal: '=',
      onBookSelected : '&',
      template: '<span style="font-size:12px;cursor:pointer;" ng-model="myModal"  class="glyphicon glyphicon-bookmark" ng-class="{active: item.bookmark}"></span>',
      link: function(scope, elem) {
        elem.bind('click', function() {
           
          scope.$apply(function(){
            scope.item.bookmark = !scope.item.bookmark;
              
          });
        });
          
          scope.toggle = function(index) {
            
      scope.bookVal = index + 1;
      scope.onBookSelected({
       value : index + 1
      });
     };
      }
    };
  });

  .glyphicon-bookmark {
    color: black !important;
    
  }
  
  .active{
  
  color:royalblue !important;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<body ng-app='Rating' ng-controller="RatingCtrl"> 
  <span style="font-size: 12px !important;">Bookmark</span>
          <button-bookmark book-val='value' on-book-selected='saveBookmark(value)'></button-bookmark>
        
          </body>

谢谢。

Answer 1

IF 条件将阻止它进一步点击。

var app = angular.module('Rating', []);
app.controller('RatingCtrl', function($scope) {
  $scope.item = {
    bookmark: false
  };

  $scope.saveBookmark = function(value) {


  }
});

app.directive('buttonBookmark', function() {
  return {
    scope: true,
    restrict: 'E',
    bookVal: '=',
    onBookSelected: '&',
    template: '<span style="font-size:12px;cursor:pointer;" ng-model="myModal"  class="glyphicon glyphicon-bookmark" ng-class="{active: item.bookmark}"></span>',
    link: function(scope, elem) {
      elem.bind('click', function() {

        scope.$apply(function() {
          if (!scope.item.bookmark) {
            scope.item.bookmark = !scope.item.bookmark;
            scope.value = 1;
          }
        });
      });

      scope.toggle = function(index) {

        scope.bookVal = index + 1;
        scope.onBookSelected({
          value: index + 1
        });
      };
    }
  };
});

.glyphicon-bookmark {
  color: black !important;
}
.active {
  color: royalblue !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>

<body ng-app='Rating' ng-controller="RatingCtrl">
  <span style="font-size: 12px !important;">Bookmark</span>
  <button-bookmark book-val='value' on-book-selected='saveBookmark(value)'></button-bookmark>

</body>

如何将值绑定到 angular js 中的指令 onclick

How to bind value to a directive onclick in angular js

html

css

angularjs