AngularJS：自定義指令HTML屬性“未定義”

Question

我寫了一個自定義指令來實現按鈕切換 。 當我與按鈕交互並確認要切換時，出現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中被弄亂了，但是在我的應用程序中看起來不錯，因為我在那兒而不是在plnkr中使用Bootstrap。 請注意在JavaScript控制台中引發的錯誤。

Answer 1

如果您通過任何靜態檢查器（如JSHint）傳遞了指令代碼，您將發現罪魁禍首：

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

您應該在這四行中使用scope.on和scope.off 。