如何將值綁定到指令onclick角js

我想創建一個書籤指令，允許用戶第一次點擊書籤圖標，顏色將隨着值1變爲藍色，並且不會被允許再次點擊。單擊書籤圖標時，默認顏色（黑色）應該變爲藍色，指令也應該與值1綁定。默認值爲零。目前我無法將該值設置爲零（默認），也沒有將onclick設置爲1，但顏色會發生變化。如何將值綁定到指令onclick角js

這裏是我的代碼：

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

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

感謝。

來源

2016-08-18 Arun Abraham

什麼是'指令應與值綁定1' –

在<按鈕書籤書-VAL = '值' 上簿選擇= 'saveBookmark（值）'> book-val ='value'，$ scope.value應該有值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>

來源

2016-08-18 12:20:22

謝謝，該解決方案不允許用戶再次點擊。有什麼辦法可以檢查點擊書籤圖標的樣式類。如果我點擊圖標，如何在彈出的警報中以藍色顯示樣式類。 –

請說清楚。無論你想再次點擊它，改變顏色或點擊一次，並停止改變顏色 –

用戶需要點擊圖標，顏色應該改變，用戶應該被限制進一步點擊。當用戶第一次點擊圖標時，指令的'value'（ng-bind）應該綁定到1，以便我可以將該值設置爲控制器中的$ scope以進一步使用它。 –

如何將值綁定到指令onclick角js

回答

相關問題