javascript - AngularJS:自定义指令 HTML 属性 'not defined'

Question

I wrote a custom directive to implement a button toggle 。当我与按钮交互并确认我想要切换它时，我得到 Uncaught Reference Error: on is not defined 。我以为我定义了 on作为自定义 <button-toggle></button-toggle> 中的 HTML 属性元素。我担心的原因是因为我可能想发送 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。