Передача переменных из директивы в контроллер

Question

Мне сложно понять, как обновить значение из события click. У меня есть настраиваемая директива, которая в основном представляет собой кнопочный переключатель. Когда кнопка выключена, я хочу, чтобы она изменила значение определенной переменной на 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 отличается от области scope.something. Только переменные, которые вы объявляете в области видимости: {...} получили привязку.

Btw, эти директивы нуждаются в доработке: 1. Вы можете использовать ng-click в шаблоне - это позволит вам не использовать вызов digrap digest. 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

EDIT:

А вот fixed plnk from the OP.