2016-07-19 65 views

回答

1

我找到了解決方案。可能有更好的方式來解決它,但我只能在此刻

我要修改離子滑動盒指令有點

想到這下面是我的代碼:

離子束。 JS(創建雙向綁定在這裏)

IonicModule.directive('ionSlideBox', [........, 
    function(...){ 
     return{ 
     scope:{ 
      counter: "=", 
      ...... 
     }, 
     controller: [.....,function(){ 
     _this.getCounter = function(){ 
      return $scope.counter; 
      } 

     _this.setCounter = function(val){ 
      scope.counter = val; 
      $scope.$broadcast("IncrementValue"); 
      } 
     }] 
    } 
} 

Directive.js

directive('updateCounter', function(){ 
return{ 
    restrict : 'A', 
    scope : false, 
    require : '^ionSlideBox', 
    link : function(scope,element, attrs,ctrl){ 
     $(element).click(function(){ 
      scope.counter = ctrl.getCounter(); 
      scope.counter--; 
      ctrl.setCounter(scope.counter); 
     }) 
    } 
}})   

ViewController.js

$scope.$on(
    "IncrementValue", 
    function handleIncrementValue() { 
     $scope.counter++; 
    } 
); 
$scope.triggerEvent = function() { 
    $scope.$broadcast("IncrementValue"); 
}; 

View.html

<ion-slide-box counter="counter"> 
    <ion-slide> 
     <button ng-click="trigger()">Increment box</button> 
     <button update-counter>Decrement box</button> 
    </ion-slide> 
</ion-slide-box> 

如果有更好的辦法,請讓我知道

感謝