Bug fixes and updated documentation

rubenv · Sep 20, 2015 · 0d7e647 · 0d7e647
1 parent 2d29fdf
commit 0d7e647
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 41 deletions.
diff --git 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
-<select2 ng-model="selected">
-  <option ng-repeat="val in values"
-          value="{{val.id}}"
-          ng-selected="{{val.id == selected}}">
-      {{val.name}}
-  </option>
+<select2 ng-model="selected" ng-options="val.id as val.name for val in values">
+  <option value="">&lt;none&gt;</option>
 </select2>
 ```
 
@@ -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
-<select2 ng-model="selected" options="queryOptions"></select2>
+<select2 ng-model="selected" options="queryOptions" ng-options="val.id as val.name for val in values">
+  <option style="display:none" value="">&lt;none&gt;</option>
+</select2>
 ```
 
 ## Custom formatting, restrictions, tokenization, ...

diff --git 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: "<select ng-transclude></select>",
             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
diff --git 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: "<select ng-transclude></select>",
             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");
+                    });
+                });
 
             }
         };