├── LICENSE
├── README.md
├── angular-dojo.js
└── test.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Andreas Drobisch and contributors
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | angular-dojo
 2 | ============
 3 | 
 4 | AngularJS directives for dojo widgets
 5 | 
 6 | Usage
 7 | -----
 8 | eg:
 9 | ```<script src='directives/angular-dojo.js'></script>```
10 | 
11 | ```
12 | angular.module('app', [
13 | 	'angular-dojo'
14 | ]);
15 | ```
16 | 
17 | Examples
18 | --------
19 | See [test.html](test.html)
20 | 
21 | License
22 | -------
23 | *angular-dojo* may be used under the terms of the MIT license, see [LICENSE](LICENSE)
24 | 


--------------------------------------------------------------------------------
/angular-dojo.js:
--------------------------------------------------------------------------------
 1 | angular.module('angular-dojo', []).directive('dojoWidget', function($timeout) {
 2 |     
 3 |     var parseProps = function(props, scope) {
 4 |         if (typeof props === 'undefined') return {};
 5 | 
 6 |     	props = '[{' + props + '}]';
 7 |         return eval(props)[0];
 8 |     };
 9 |     
10 |     return {
11 |         restrict: "A",
12 |         replace: false,
13 |         transclude: false,
14 |         require: '?ngModel',
15 |         scope: {
16 |             'ngModel' : '=?',
17 |             'ngClick' : '&',
18 |             'ngChange' : '&',
19 |             'dojoStore' : '&',
20 |             'dojoProps' : '@',
21 |             'dojoDisplayValue' : '=?'
22 |         },
23 |         link: function(scope, element, attrs, model) {
24 |             require(["dojo/ready", "dijit/dijit", attrs.dojoWidget, "dojo/on"], function(ready, dijit, DojoWidget, on) {
25 |           
26 |                 ready(function () {                
27 |                     scope.widget = new DojoWidget({}, element[0]);
28 |                     
29 |                     attrs.$observe('dojoProps', function(dojoProps) {
30 |                         scope.widget.set(parseProps(dojoProps, scope));
31 |                     });
32 |                     
33 |                     attrs.$observe('dojoStore', function() {
34 |                         if (scope.dojoStore != undefined) {
35 |                             scope.widget.store = scope.dojoStore();     
36 |                         }
37 |                     });
38 |                     
39 |                     scope.$watch('ngModel', function() {
40 |                         if (scope.ngModel != undefined) {
41 |                         	if (attrs.dojoWidget == 'dijit/form/FilteringSelect' || attrs.dojoWidget == 'dijit/form/Select') {
42 |                         		scope.widget.set('item', scope.ngModel);
43 |                         	}
44 |                         	else {
45 |                         		scope.widget.set('value', scope.ngModel);
46 |                                 scope.widget.set('checked', scope.ngModel);
47 |                         	}
48 |                         }
49 |                     });
50 |                     
51 |                     on(scope.widget, "blur", function () {
52 |                         if (scope.widget.displayedValue != undefined) {
53 |                             scope.dojoDisplayValue = scope.widget.displayedValue;
54 |                         }
55 |                     });
56 | 
57 |                     on(scope.widget, "change", function(newValue) {
58 |                     	if (attrs.dojoWidget == 'dijit/form/FilteringSelect' || attrs.dojoWidget == 'dijit/form/Select') {
59 |                     		scope.ngModel = this.item;
60 |                     	}
61 |                     	else {
62 |                      		scope.ngModel = newValue;
63 |                     	}
64 |                     	                        
65 |                         $timeout(function() {
66 |                             scope.$apply();
67 |                             if (scope.ngChange != undefined) {
68 |                                 scope.ngChange();
69 |                             }
70 |                         });
71 |                     });
72 | 
73 |                     on(scope.widget, 'click', function() {
74 |                         $timeout(function() {
75 |                             scope.$apply();
76 |                             if (scope.ngClick != undefined) {
77 |                                 scope.ngClick();
78 |                             }
79 |                         });
80 |                     });
81 |                 });
82 |             });
83 |         }
84 |     };
85 | });
86 | 


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html data-ng-app="angular-dojo-test">
 3 | 	<head>
 4 | 		<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css" />    	
 5 | 	</head>
 6 |     <body class="claro" data-ng-controller="TestController">
 7 | 
 8 |     	<div>
 9 | 	    	<div data-dojo-widget="dijit/Calendar" data-ng-model="date" data-ng-change="log(date)"/>
10 | 	    </div>
11 | 	    Date: {{date}}
12 | 
13 | 	    <div>
14 | 		   	<select
15 | 		   		data-dojo-widget="dijit/form/FilteringSelect"
16 | 		   		data-dojo-props="name: 'filterSelect', searchAttr: 'search'"
17 | 		   		data-ng-model="selection"
18 | 		   		data-dojo-store="store" data-ng-change="log(selection)"></select>
19 | 		   	Selection: {{selection}}
20 | 		</div>
21 | 
22 | 
23 | 	   	<div>
24 | 		   	<input data-dojo-widget="dijit/form/Textarea" data-ng-model="mytext" />
25 | 		   	{{mytext}}
26 | 		</div>
27 | 
28 | 		<div>
29 | 		   	<input data-dojo-widget="dijit/form/DateTextBox" data-ng-model="date2" />
30 | 		   	{{date2}}
31 | 		</div>
32 | 
33 | 		<div>
34 | 		   	<form id="myform">
35 | 			    <input type="radio" data-dojo-widget="dijit/form/RadioButton" name="drink" id="radioOne" data-ng-model="drink"  value="tea"/> <label for="radioOne">Tea</label> <br />
36 | 			    <input type="radio" data-dojo-widget="dijit/form/RadioButton" name="drink" id="radioTwo" data-ng-model="drink" checked value="coffee"/> <label for="radioTwo">Coffee</label> <br />
37 | 			</form>
38 | 			{{drink}}
39 | 		</div>
40 | 
41 | 
42 | 		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
43 | 		<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>
44 |     	
45 |     	<script src="angular-dojo.js"></script>
46 | 
47 | 
48 |     	<script>
49 |     	
50 |     	function TestController($scope) {
51 |     		$scope.selection = 'CA';
52 |     		$scope.search = "name";
53 |     		$scope.date = new Date();
54 |     		
55 | 			require([
56 | 			    "dojo/ready", "dojo/store/Memory", "dijit/form/FilteringSelect"
57 | 			], function(ready, Memory, FilteringSelect){
58 | 			    $scope.store = new Memory({
59 | 			        data: [
60 | 			            {name:"Alabama", id:"AL"},
61 | 			            {name:"Alaska", id:"AK"},
62 | 			            {name:"American Samoa", id:"AS"},
63 | 			            {name:"Arizona", id:"AZ"},
64 | 			            {name:"Arkansas", id:"AR"},
65 | 			            {name:"Armed Forces Europe", id:"AE"},
66 | 			            {name:"Armed Forces Pacific", id:"AP"},
67 | 			            {name:"Armed Forces the Americas", id:"AA"},
68 | 			            {name:"California", id:"CA"},
69 | 			            {name:"Colorado", id:"CO"},
70 | 			            {name:"Connecticut", id:"CT"},
71 | 			            {name:"Delaware", id:"DE"}
72 | 			        ]
73 | 			    });
74 | 			});
75 | 
76 | 		  	$scope.log = function(msg) {
77 | 	    		console.log(msg);
78 | 	    	};
79 |     	};
80 |     	
81 |     	var module = angular.module("angular-dojo-test", ['angular-dojo']);
82 | 
83 | 
84 | 
85 |     	</script>
86 |     </body>
87 | </html>
88 | 


--------------------------------------------------------------------------------