diff --git a/README.md b/README.md index 2546909..25e8f70 100644 --- a/README.md +++ b/README.md @@ -23,17 +23,13 @@ angular.module('myApp', ['rt.select2']); ## Usage -A JS Bin demo showing working usage examples are available [here](https://jsbin.com/gipezidemi/edit?html,js,output). +A JS Bin demo showing working usage examples are available [here](https://jsbin.com/fifaqu/edit?html,js,output). Usage similar to a normal select: ```html - - + + ``` @@ -57,6 +53,15 @@ angular.module('myApp').controller('MyAsyncController', function ($scope) { /* ... omitted for brevity, see the JS bin ... */ + $scope.selected = "3620194"; + + $scope.values = [ + { + id: "3620194", + name: "select2/select2" + } + ]; + $scope.queryOptions = { ajax: { url: "https://api.github.com/search/repositories", @@ -87,7 +92,9 @@ angular.module('myApp').controller('MyAsyncController', function ($scope) { ``` ```html - + + + ``` ## Custom formatting, restrictions, tokenization, ... diff --git a/dist/angular-select2.js b/dist/angular-select2.js index c071657..d4bedc3 100644 --- a/dist/angular-select2.js +++ b/dist/angular-select2.js @@ -31,13 +31,17 @@ angular.module("rt.select2", []) return { require: "ngModel", + scope: { + ngModel: "=", + options: "=" + }, priority: 1, restrict: "E", transclude: true, // transclusion instructs angular to embed the original content from the DOM into the resultant output template: "", replace: true, link: function (scope, element, attrs, controller) { - var opts = angular.extend({}, defaultOptions, scope.$eval(attrs.options)); + var opts = angular.extend({}, defaultOptions, scope.options); var isMultiple = angular.isDefined(attrs.multiple) || opts.multiple; opts.multiple = isMultiple; @@ -65,26 +69,20 @@ angular.module("rt.select2", []) if (controller.$touched) { return; } - - scope.$apply(controller.$setTouched); + controller.$setTouched(); }); }); - // Make sure that changes to the value is reflected in the select2 input - scope.$watch( - function () { - return controller.$viewValue; - }, - function (newVal, oldVal) { - if (newVal === oldVal) { - return; - } - $timeout(function () { - element.val(newVal).trigger("change"); - }); + // make sure that changes to the value is reflected in the select2 input + scope.$watch("ngModel", function (newVal, oldVal) { + if (newVal === oldVal) { + return; } - ); + $timeout(function () { + element.trigger("change"); + }); + }); } }; diff --git a/dist/angular-select2.min.js b/dist/angular-select2.min.js index 70a6d8c..61b55f4 100644 --- a/dist/angular-select2.min.js +++ b/dist/angular-select2.min.js @@ -1 +1 @@ -angular.module("rt.select2",[]).value("select2Config",{}).factory("select2Stack",function(){var a=[];return{$register:function(b){a.push(b)},$unregister:function(b){var c=a.indexOf(b);-1!==c&&a.splice(c,1)},closeAll:function(){a.forEach(function(a){a.close()})}}}).directive("select2",["$rootScope","$timeout","$parse","$filter","select2Config","select2Stack",function(a,b,c,d,e,f){"use strict";var g={};return e&&angular.extend(g,e),{require:"ngModel",priority:1,restrict:"E",transclude:!0,template:"",replace:!0,link:function(a,c,d,e){var h=angular.extend({},g,a.$eval(d.options)),i=angular.isDefined(d.multiple)||h.multiple;h.multiple=i,d.placeholder&&(h.placeholder=d.placeholder);var j={close:function(){c.select2("close")}};f.$register(j),a.$on("destroy",function(){f.$unregister(j)}),b(function(){c.select2(h),c.on("select2-blur",function(){e.$touched||a.$apply(e.$setTouched)})}),a.$watch(function(){return e.$viewValue},function(a,d){a!==d&&b(function(){c.val(a).trigger("change")})})}}}]); \ No newline at end of file +angular.module("rt.select2",[]).value("select2Config",{}).factory("select2Stack",function(){var a=[];return{$register:function(b){a.push(b)},$unregister:function(b){var c=a.indexOf(b);-1!==c&&a.splice(c,1)},closeAll:function(){a.forEach(function(a){a.close()})}}}).directive("select2",["$rootScope","$timeout","$parse","$filter","select2Config","select2Stack",function(a,b,c,d,e,f){"use strict";var g={};return e&&angular.extend(g,e),{require:"ngModel",scope:{ngModel:"=",options:"="},priority:1,restrict:"E",transclude:!0,template:"",replace:!0,link:function(a,c,d,e){var h=angular.extend({},g,a.options),i=angular.isDefined(d.multiple)||h.multiple;h.multiple=i,d.placeholder&&(h.placeholder=d.placeholder);var j={close:function(){c.select2("close")}};f.$register(j),a.$on("destroy",function(){f.$unregister(j)}),b(function(){c.select2(h),c.on("select2-blur",function(){e.$touched||e.$setTouched()})}),a.$watch("ngModel",function(a,d){a!==d&&b(function(){c.trigger("change")})})}}}]); \ No newline at end of file diff --git a/src/select2.js b/src/select2.js index 942d781..5d2417f 100644 --- a/src/select2.js +++ b/src/select2.js @@ -31,13 +31,17 @@ angular.module("rt.select2", []) return { require: "ngModel", + scope: { + ngModel: "=", + options: "=" + }, priority: 1, restrict: "E", transclude: true, // transclusion instructs angular to embed the original content from the DOM into the resultant output template: "", replace: true, link: function (scope, element, attrs, controller) { - var opts = angular.extend({}, defaultOptions, scope.$eval(attrs.options)); + var opts = angular.extend({}, defaultOptions, scope.options); var isMultiple = angular.isDefined(attrs.multiple) || opts.multiple; opts.multiple = isMultiple; @@ -65,26 +69,20 @@ angular.module("rt.select2", []) if (controller.$touched) { return; } - - scope.$apply(controller.$setTouched); + controller.$setTouched(); }); }); - // Make sure that changes to the value is reflected in the select2 input - scope.$watch( - function () { - return controller.$viewValue; - }, - function (newVal, oldVal) { - if (newVal === oldVal) { - return; - } - $timeout(function () { - element.val(newVal).trigger("change"); - }); + // make sure that changes to the value is reflected in the select2 input + scope.$watch("ngModel", function (newVal, oldVal) { + if (newVal === oldVal) { + return; } - ); + $timeout(function () { + element.trigger("change"); + }); + }); } };