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。

AngularJS：自定义指令HTML属性'未定义'

1 个答案: