0

Warning: code dump imminent.

Hello all. I am working with Angular's JQM library. I am trying to create an attribute that will set the default position(on or off) for the JQM-flip directive. I added an attribute called defaultValue to the directive's scope and assigned a value to it in the link function like so:

scope.defaultValue = angular.isDefined(attr.defaultValue) ? scope.defaultValue : 1;

This didn't work, so I'm assuming there needs to be a function which takes the value and changes the look and value for the toggle switch. Though I'm not sure how to define such a function within this directive...any help is greatly appreciated.

Directive:

jqmModule.directive('jqmFlip', [function () {
return {
    restrict: 'A',
    transclude: true,
    replace: true,
    templateUrl: 'templates/jqmFlip.html',
    scope: {
        onLabel: '@',
        onValue: '@',
        offLabel: '@',
        offValue: '@',
        mini: '@',
        disabled: '@',
        defaultValue: '@'
    },
    require: ['?ngModel', '^?jqmControlgroup'],
    link: function (scope, element, attr, ctrls) {
        var ngModelCtrl = ctrls[0];
        var jqmControlGroupCtrl = ctrls[1];
        var parsedOn;
        var parsedOff;

        scope.theme = scope.$theme || 'c';
        scope.isMini = isMini;
        scope.onValue = angular.isDefined(attr.onValue) ? scope.onValue : true;
        scope.offValue = angular.isDefined(attr.offValue) ? scope.offValue : false;
        scope.defaultValue = angular.isDefined(attr.defaultValue) ? scope.defaultValue : 1;


        initToggleState();
        bindClick();

        function initToggleState () {
            ngModelCtrl.$parsers.push(parseBoolean);
            parsedOn = parseBoolean(scope.onValue);
            parsedOff = parseBoolean(scope.offValue);
            ngModelCtrl.$render = updateToggleStyle;
            ngModelCtrl.$viewChangeListeners.push(updateToggleStyle);
        }

        function updateToggleStyle () {
            updateNaNAsOffValue();
            var toggled = isToggled();
            scope.toggleLabel = toggled ? scope.onLabel : scope.offLabel;
            scope.onStyle = toggled ? 100 : 0;
            scope.offStyle = toggled ? 0 : 100;
        }

        // this has to be done in the change listener,
        // otherwise the potential scope value would be overwritten with the off value
        function updateNaNAsOffValue () {
            if (!ngModelCtrl.$viewValue) {
                ngModelCtrl.$setViewValue(parsedOff);
            }
        }

        function bindClick () {
            scope.toggle = function () {
                ngModelCtrl.$setViewValue(isToggled() ? parsedOff : parsedOn);
            };
        }

        function isToggled () {
            return ngModelCtrl.$viewValue === parsedOn;
        }

        function isMini() {
            return scope.mini || (jqmControlGroupCtrl && jqmControlGroupCtrl.$scope.mini);
        }

        function parseBoolean(value) {
            if (value === 'true') {
                return true;
            } else if (value === 'false') {
                return false;
            }
            return value;
        }
    }
};
}]);

Template:

angular.module("templates/jqmFlip.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("templates/jqmFlip.html",
"<div jqm-scope-as=\"jqmFlip\">\n" +
"        <label class=\"ui-slider\" ng-transclude></label>\n" +
"        <div class=\"ui-slider ui-slider-switch ui-btn-down-{{$scopeAs.jqmFlip.theme}} ui-btn-corner-all\"\n" +
"             jqm-class=\"{'ui-disabled': $scopeAs.jqmFlip.disabled,\n" +
"                        'ui-mini': $scopeAs.jqmFlip.isMini()}\"\n" +
"             ng-click=\"$scopeAs.jqmFlip.toggle()\">\n" +
"             <span class=\"ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all\" ng-style=\"{width: $scopeAs.jqmFlip.onStyle + '%'}\">{{$scopeAs.jqmFlip.onLabel}}</span>\n" +
"             <span class=\"ui-slider-label ui-slider-label-b ui-btn-down-{{$scopeAs.jqmFlip.theme}} ui-btn-corner-all\" ng-style=\"{width: $scopeAs.jqmFlip.offStyle + '%'}\">{{$scopeAs.jqmFlip.offLabel}}</span>\n" +
"                <div class=\"ui-slider-inneroffset\">\n" +
"                  <a class=\"ui-slider-handle ui-slider-handle-snapping ui-btn ui-btn-corner-all ui-btn-up-{{$scopeAs.jqmFlip.theme}} ui-shadow\"\n" +
"                     title=\"{{$scopeAs.jqmFlip.toggleLabel}}\"\n" +
"                     ng-style=\"{left: $scopeAs.jqmFlip.onStyle + '%'}\">\n" +
"                    <span class=\"ui-btn-inner\"><span class=\"ui-btn-text\"></span></span>\n" +
"                  </a>\n" +
"                </div>\n" +
"        </div>\n" +
"</div>\n" +
"");
}]);
4

1 回答 1

0

通过对指令进行以下更改找到了一种方法：

scope: {

        defaultValue: '@'
}

 link: function (scope, element, attr, ctrls) {
scope.defaultValue = attr.defaultValue;

function updateToggleStyle () {
            updateNaNAsOffValue(scope.defaultValue);
            var toggled = isToggled();
            scope.toggleLabel = toggled ? scope.onLabel : scope.offLabel;
            scope.onStyle = toggled ? 100 : 0;
            scope.offStyle = toggled ? 0 : 100;
        }

        // this has to be done in the change listener,
        // otherwise the potential scope value would be overwritten with the off value
        function updateNaNAsOffValue (defaultValue) {
            if (!ngModelCtrl.$viewValue) {
                ngModelCtrl.$setViewValue(defaultValue);
            }
        }
}

然后我像这样引用属性：

<div jqm-flip mini="true" jqm-theme="d" ng-model="search.includeKeywords" on-label="On" on-value="1" off-label="Off" off-value="0" default-value="1">

我希望有人发现这很有用！

于 2013-08-30T20:10:41.143 回答