Question

我被交给了这个客户使用自定义选择框的css / js库 - customSelect（）http://adam.co/lab/jquery/customselect/

我的问题是，当我使用它时，我无法获得模型的价值...猜测它是导致冲突的jQuery。我是否需要制定指令，并且有人知道如何做。

谢谢

剥离的演示 http://wheretheforestends.com/temp/ng/index_stripped.html

Answer 1

您还需要绑定自定义选择更改事件并更改模型，您还需要绑定模型更改并更改自定义选择。我已经为jQuery selectbox插件编写了基本指令：

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://www.bulgaria-web-developers.com/projects/javascript/selectbox/js/jquery.selectbox-0.2.js"></script>
        <link type="text/css" href="http://www.bulgaria-web-developers.com/projects/javascript/selectbox/css/jquery.selectbox-0.2.css" rel="stylesheet">
    </head>
    <body ng-app="plunker" ng-controller="MainCtrl">
        {{sbMonth}}
        <select selectbox="sbMonth">
            <option value="" disabled="disabled">Please select</option>
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
        </select>
    </body>
    <script>
        var app = angular.module('plunker', []);

        app.controller('MainCtrl', ['$scope', function($scope) {
            $scope.sbMonth = 'option2';
        }]).directive('selectbox', function() {
            return {
                scope: {
                    model: '=selectbox'
                },
                link: function (scope, element, attrs) {
                    if (!jQuery || !jQuery.selectbox) {
                        return;
                    }
                    jQuery(element).val(scope.model);
                    scope.applyChange = true;
                    
                    jQuery(element).selectbox({
                        onChange: function(val, input) {
                            if (scope.applyChange) {
                                scope.$apply(function() {
                                    scope.model = val;
                                });
                            }
                        }
                    });
                    
                    scope.$watch('model', function(newVal, oldVal) {
                        scope.applyChange = false; //Avoid endless recursion
                        var text = jQuery(element).children('[value="' + newVal + '"]').html();
                        jQuery(element).selectbox("change", newVal, text); //tricky way to set value
                        scope.applyChange = true;
                    });
                }
            };
        });
    </script>
</html>

Angular和customSelect

1 个答案: