Question

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

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

感谢。

Answer 1

IF条件会阻止其进一步点击。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: