Question

我正在使用Bootstrap Toggle作为我的AngularJs项目。我为这个插件创建了angular指令。

myApp.directive('iosToggle', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).bootstrapToggle(scope.$eval(attrs.iosToggle));
        }
    };
});

并在我的视图中使用指令

<input type="checkbox" id="myInterview" data-ios-toggle="toggle" data-style="ios" data-onstyle="info" data-size="small" data-on="On" data-off="Off" ng-model="myData.myInterview">

我得到相同的设计，能够打开或关闭，但当我提交表单时，我没有收到复选框值。

Answer 1

是的，我已经使用$ watch更新了我的指令，然后更新了模型。它有效。

myApp.directive('iosToggle', function($timeout){
    return {
        restrict: 'A',
        transclude: true,
        replace: false,
        require: 'ngModel',
        link: function ($scope, $element, $attr, ngModel) {
            // update model from Element
            var updateModelFromElement = function() {
                // If modified
                var checked = $element.prop('checked');
                if (checked !== ngModel.$viewValue) {
                    // Update ngModel
                    ngModel.$setViewValue(checked);
                    $scope.$apply();
                }
            };

            // Update input from Model
            var updateElementFromModel = function() {
                $element.trigger('change');
            };

            // Observe: Element changes affect Model
            $element.on('change', function() {
                updateModelFromElement();
            });

            // Observe: ngModel for changes
            $scope.$watch(function() {
                    return ngModel.$viewValue;
                }, function() {
                updateElementFromModel();
            });

            // Initialise BootstrapToggle
            $timeout(function() {
                $element.bootstrapToggle();
            });
        }
    };
});

AngularJs - Bootstrap切换无法获取复选框值

1 个答案: