angular-ui / ui-select2

AngularJS wrapper for select2 (deprecated, use angular-ui/ui-select)
https://github.com/angular-ui/ui-select
MIT License
595 stars 444 forks source link

using ui-select2 in directive with isolate scope #94

Open larryseagull opened 10 years ago

larryseagull commented 10 years ago

I'm having trouble using ui-select2 in a custom directive with an isolate scope. I am getting this error:

query function not defined for Select2 ...

My select2 options are defined on the controller scope, so I don't have this problem if I make the directive inherit from the controller scope (set scope: true). But I want an isolate scope for the sake of modularity.

juanpujol commented 10 years ago

I've the same problem if I try to configure on the link function. Any news? Thank you.

cboden commented 10 years ago

I have the same problem. This problem started happening after going from angular#1.2.0-rc.2 to rc3 (and above to current). Here is the error I receive followed by the beef of my directive:

query function not defined for Select2 undefined

.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            query: '&'
        },
        replace: true,
        template: '<input type="hidden" ng-model="selections" ui-select2="tagOptions" multiple>',
        link: function(scoe, ele, attrs) {
            scope.tagOptions = {
                multiple: true,
                simple_tags: true,
                tokenSeparators: [',', ' '],
                minimumInputLength: 1,
                query: function(query) {
                    var data = // do stuff;
                    query.callback(data);
                }
            }

            scope.$watch('selections', function(newVal, oldVal) {
                // do other stuff
            }
        }
    }
}

Note: I know the query in the isolate scope is not the same query being passed to tagOptions, it's used elsewhere.

cboden commented 10 years ago

I was able to resolve this issue by moving some of my code from the link function to the controller function in my directive.

jeffpogo commented 10 years ago

cboden -- can you please post an example of our working directive? ... Thank you, Jeff.

cboden commented 10 years ago

@jeffpogo All I did was move the scope.tagOptions = lines out of the link function and into the controller: function($scope) function and set tagOptions via $scope.tagOptions =.

CharlesHamel commented 10 years ago

Thank you @cboden it solved my problem!