將指令中的變量傳遞給控制器​​

Question

我很難搞清楚如何更新單擊事件中的值。我有一個自定義指令，基本上是一個按鈕開關。當按鈕關閉時，我希望它將某個變量的值更改爲0.當它打開時，我希望它將該變量的值更改爲大於0的數字。

我創建了一個plnkr重新創建問題。

此外，我讀了this post，這是有點幫助，但仍有我撓我的頭如何處理我的問題。

在指令中，我處理click事件，然後嘗試更改變量的值，但它在視圖中從未被更改過。我想我必須將該指令的值傳遞給控制器​​，以便將其傳播到視圖，但我不知道如何去做。

angular 
    .module('app') 
    .directive('buttonToggle', buttonToggle); 

function buttonToggle() { 
    function link(scope, elm) { 
    if(elm === "#btnToggle1") { 
     angular.element(elm).on('click', function() { 
     var confirmResponse = (window.confirm("Are you sure?") === true); 

     if(confirmResponse) { 
      scope.on = !scope.on; 
      scope.off = !scope.off; 
      scope.$digest(); 

      if(scope.on) { 
       $scope.switchBtnOutput = 8044; // var I'm trying to change 
       return scope.off; 
      } else if(scope.off) { 
       $scope.switchBtnOutput = 0; // var I'm trying to change 
       return scope.on; 
      } 
     } 

     scope.$digest(); 
    }); 
    } else { 
     angular.element(elm).on('click', function() { 
     var confirmResponse = (window.confirm("Are you sure?") === true); 

     if(confirmResponse) { 
      scope.on = !scope.on; 
      scope.off = !scope.off; 
      scope.$digest(); 
      if(scope.on) { 
       return scope.off; 
      } else if(scope.off) { 
       return scope.on; 
      } 
     } 

     scope.$digest(); 
     }); 
    } 
    } 

    var directive = { 
     restrict: 'AE', 
     link: link, 
     replace: true, 
     templateUrl: 'buttonToggle.html', 
     scope: { 
      on: "=", 
      off: "=" 
     } 
    }; 

    return directive; 
} 

Answer 1

您的指令引入了隔離範圍，所以指令scope.something與controller scope.something不同。只有你在範圍中聲明的變量：{...}被綁定。

順便說一下，這些指令需要返工： 1.您可以在模板中使用ng-click - 這將讓您不要使用廢話摘要調用。 2. on ==！off - 所以用一個變量代替2. 3. $ scope = {} < <這是幹嘛的。

所以，新的模板：

<div class="btn-group btn-toggle"> 
    <button class="btn btn-sm" ng-class="{'btn-success':on, 'btn-default':!on}" ng-click="toggle()" ng-disabled="on">ON</button> 
    <button class="btn btn-sm" ng-class="{'btn-danger':!on, 'btn-default':on}" ng-click="toggle()" ng-disabled="!on">OFF</button> 
</div> 

指令：

function buttonToggle() 
{ 
    function link(scope, elm) 
    { 
    scope.toggle = function() { 
     var confirmResponse = (window.confirm("Are you sure?") === true); 

     if(confirmResponse) { 
      scope.on = !scope.on; 
      scope.output = scope.output + 'Changed to ' + scope.on + '. '; 
     } 
    } 
    } 

    var directive = 
    { 
     restrict: 'AE', 
     link: link, 
      replace: true, 
     templateUrl: 'buttonToggle.html', 
     scope: { 
      on: "=", 
      output: '=' 
     } 
    }; 

    return directive; 
} 

普拉克http://plnkr.co/edit/qK8TMmjoxQ7rgKraryKp?p=preview

編輯工作：

這裏是fixed plnk from the OP。