magicsuggest with angularjs directive

[blqthien]

hi all. i want user anguarjs with magicsuggest, when load init data, magicsuggest can't set data from ng-model. please help me !!!

[nicolasbize]

The component needs an angular directive. It's on my todo list.

[PW999]

Had to write my own directive, this may get you (or others started). It's not very configurable, but it suits my needs ;) .

.directive('magicSuggest', ['$parse', '$rootScope', function($parse, $rootScope) {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                // where the values are store
                value: '=',
                // max number of suggestions
                max: '@',
                // autocomplete api url, should accept ?query parameter
                apiUrl : '@',
                // Allow adding new entries
                allowFreeEntries : '@',
                // highlight the entered word in the suggestionbox
                highlight : '@',
                // name of the id field
                valueField : '@',
                // mark the field as disabled
                disabled : '=?'
            },
            compile: function (element, attrs) {
                var html = "<div id='" + (attrs.id || 'magicSelect' ) + "' ></div>";

                var newElem = $(html);
                element.replaceWith(newElem);

                // Link function
                return function (scope, element, attrs, controller) {
                    // Init defaults
                    scope.max = scope.max || 10;
                    scope.allowFreeEntries = scope.allowFreeEntries || false;
                    scope.highlight = scope.highlight || true;
                    scope.valueField = scope.valueField || 'id';
                    scope.disabled = scope.disabled || false;

                    var ms = element.magicSuggest({
                        allowFreeEntries: scope.allowFreeEntries,

                        mode: 'remote',
                        data: scope.apiUrl,
                        dataUrlParams: { limit : scope.max },

                        renderer: function(data){
                            var pre = '';
                            if (data._setDepth == 1) {
                                pre = '';
                            } else if (data._setDepth == 2) {
                                pre = '&#8211; ';
                            } else if (data._setDepth == 3) {
                                pre = '&#8212; ';
                            } else {
                                pre = '? ';   
                            }
                            return pre + data.names[$rootScope.activeLanguage];
                        },
                        selectionRenderer : function(data) {
                            return data.fqn[$rootScope.activeLanguage];  
                        },
                        highlight : scope.highlight,
                        hideTrigger : true,

                        valueField : scope.valueField,
                        resultsField : 'values',

                        allowDuplicates : false,
                        autoSelect : false,
                        expandOnFocus: false,
                        selectFirst : true,
                        toggleOnClick : false,
                        useTabKey : true,
                        useCommaKey : true,
                        editable: !scope.disabled,
                        disabled : scope.disabled,

                        noSuggestionText : '',

                        value : scope.value
                    });

                    $(ms).on('selectionchange', function(){
                        scope.$apply(function (scope) {
                            scope.value = ms.getSelection();
                        });
                    });
                }
            }
        }
    }])
```javascript

[leonardochaia]

Hi, I'm working on an Angular directive for MagicSuggest. It's still in development process, angular-magicsuggest repo