AngularJS: Пользовательская директива HTML-атрибут 'не определен'

Question

I wrote a custom directive to implement a button toggle. Когда я взаимодействую с кнопкой и подтверждаю, что хочу ее переключить, я получаю Uncaught Reference Error: on is not defined. Я думал, что я определил on как атрибут HTML в пользовательском элементе <button-toggle></button-toggle>. Причина моей озабоченности в том, что я могу отправить на сервер значение on или off. Где я иду не так?

buttonToggle.html

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

buttonToggle.js

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

function buttonToggle() { 

    function link(scope, elm, attr, ctrl){ 

     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(on) 
        return off; 
       else if(off) 
        return on; 
      } 

      scope.$digest(); 
     }); 
    } 

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

    return directive; 
} 

buttonToggleCtrl.js

angular.module('myApp').controller('buttonToggleCtrl', buttonToggleCtrl); 

function buttonToggleCtrl($scope) { 
    $scope.activeOn = true; 
    $scope.activeOff = false; 
} 

index.html фрагмент

<button-toggle on="activeOn" off="activeOff"></button-toggle> 

Как примечание, не беспокойтесь о том, как сейчас кнопка выглядит. Я знаю, что это испортилось в plnkr, но в моем приложении это выглядит хорошо, так как я использую Bootstrap там, а не в plnkr. Обратите внимание на ошибку, возникающую в консоли JavaScript.

Answer 1

Если вы сдадите код директивы через любую статическую проверку, как JSHint, вы бы заметили преступник:

if(on) 
    return off; 
else if(off) 
    return on; 

Вы должны использовать scope.on и scope.off в этих четырех строках вместо этого.