diff options
Diffstat (limited to 'src/ng/directive')
| -rw-r--r-- | src/ng/directive/ngClass.js | 76 | ||||
| -rw-r--r-- | src/ng/directive/ngController.js | 2 | ||||
| -rw-r--r-- | src/ng/directive/ngInclude.js | 76 | ||||
| -rw-r--r-- | src/ng/directive/ngStyle.js | 17 | ||||
| -rw-r--r-- | src/ng/directive/ngView.js | 99 | ||||
| -rw-r--r-- | src/ng/directive/select.js | 2 |
6 files changed, 152 insertions, 120 deletions
diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js index 1e9a260b..7e0d5dba 100644 --- a/src/ng/directive/ngClass.js +++ b/src/ng/directive/ngClass.js @@ -36,30 +36,35 @@ function classDirective(name, selector) { * names, an array, or a map of class names to boolean values. * * @example - <doc:example> - <doc:source> - <input type="button" value="set" ng-click="myVar='ng-invalid'"> + <example> + <file name="index.html"> + <input type="button" value="set" ng-click="myVar='my-class'"> <input type="button" value="clear" ng-click="myVar=''"> <br> - <span ng-class="myVar">Sample Text </span> - </doc:source> - <doc:scenario> + <span ng-class="myVar">Sample Text</span> + </file> + <file name="style.css"> + .my-class { + color: red; + } + </file> + <file name="scenario.js"> it('should check ng-class', function() { expect(element('.doc-example-live span').prop('className')).not(). - toMatch(/ng-invalid/); + toMatch(/my-class/); using('.doc-example-live').element(':button:first').click(); expect(element('.doc-example-live span').prop('className')). - toMatch(/ng-invalid/); + toMatch(/my-class/); using('.doc-example-live').element(':button:last').click(); expect(element('.doc-example-live span').prop('className')).not(). - toMatch(/ng-invalid/); + toMatch(/my-class/); }); - </doc:scenario> - </doc:example> + </file> + </example> */ var ngClassDirective = classDirective('', true); @@ -80,26 +85,33 @@ var ngClassDirective = classDirective('', true); * of the evaluation can be a string representing space delimited class names or an array. * * @example - <doc:example> - <doc:source> + <example> + <file name="index.html"> <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']"> <li ng-repeat="name in names"> - <span ng-class-odd="'ng-format-negative'" - ng-class-even="'ng-invalid'"> - {{name}} + <span ng-class-odd="'odd'" ng-class-even="'even'"> + {{name}} </span> </li> </ol> - </doc:source> - <doc:scenario> + </file> + <file name="style.css"> + .odd { + color: red; + } + .even { + color: blue; + } + </file> + <file name="scenario.js"> it('should check ng-class-odd and ng-class-even', function() { expect(element('.doc-example-live li:first span').prop('className')). - toMatch(/ng-format-negative/); + toMatch(/odd/); expect(element('.doc-example-live li:last span').prop('className')). - toMatch(/ng-invalid/); + toMatch(/even/); }); - </doc:scenario> - </doc:example> + </file> + </example> */ var ngClassOddDirective = classDirective('Odd', 0); @@ -120,8 +132,8 @@ var ngClassOddDirective = classDirective('Odd', 0); * result of the evaluation can be a string representing space delimited class names or an array. * * @example - <doc:example> - <doc:source> + <example> + <file name="index.html"> <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']"> <li ng-repeat="name in names"> <span ng-class-odd="'odd'" ng-class-even="'even'"> @@ -129,15 +141,23 @@ var ngClassOddDirective = classDirective('Odd', 0); </span> </li> </ol> - </doc:source> - <doc:scenario> + </file> + <file name="style.css"> + .odd { + color: red; + } + .even { + color: blue; + } + </file> + <file name="scenario.js"> it('should check ng-class-odd and ng-class-even', function() { expect(element('.doc-example-live li:first span').prop('className')). toMatch(/odd/); expect(element('.doc-example-live li:last span').prop('className')). toMatch(/even/); }); - </doc:scenario> - </doc:example> + </file> + </example> */ var ngClassEvenDirective = classDirective('Even', 1); diff --git a/src/ng/directive/ngController.js b/src/ng/directive/ngController.js index 55da78cd..72bd3c00 100644 --- a/src/ng/directive/ngController.js +++ b/src/ng/directive/ngController.js @@ -33,7 +33,7 @@ * for a manual update. <doc:example> <doc:source> - <script type="text/javascript"> + <script> function SettingsController($scope) { $scope.name = "John Smith"; $scope.contacts = [ diff --git a/src/ng/directive/ngInclude.js b/src/ng/directive/ngInclude.js index 9796b4e1..6d89e847 100644 --- a/src/ng/directive/ngInclude.js +++ b/src/ng/directive/ngInclude.js @@ -26,41 +26,47 @@ * - Otherwise enable scrolling only if the expression evaluates to truthy value. * * @example - <doc:example> - <doc:source jsfiddle="false"> - <script> - function Ctrl($scope) { - $scope.templates = - [ { name: 'template1.html', url: 'examples/ng-include/template1.html'} - , { name: 'template2.html', url: 'examples/ng-include/template2.html'} ]; - $scope.template = $scope.templates[0]; - } - </script> - <div ng-controller="Ctrl"> - <select ng-model="template" ng-options="t.name for t in templates"> - <option value="">(blank)</option> - </select> - url of the template: <tt><a href="{{template.url}}">{{template.url}}</a></tt> - <hr/> - <div ng-include src="template.url"></div> - </div> - </doc:source> - <doc:scenario> - it('should load template1.html', function() { - expect(element('.doc-example-live [ng-include]').text()). - toBe('Content of template1.html\n'); - }); - it('should load template2.html', function() { - select('template').option('1'); - expect(element('.doc-example-live [ng-include]').text()). - toBe('Content of template2.html\n'); - }); - it('should change to blank', function() { - select('template').option(''); - expect(element('.doc-example-live [ng-include]').text()).toEqual(''); - }); - </doc:scenario> - </doc:example> + <example> + <file name="index.html"> + <div ng-controller="Ctrl"> + <select ng-model="template" ng-options="t.name for t in templates"> + <option value="">(blank)</option> + </select> + url of the template: <tt>{{template.url}}</tt> + <hr/> + <div ng-include src="template.url"></div> + </div> + </file> + <file name="script.js"> + function Ctrl($scope) { + $scope.templates = + [ { name: 'template1.html', url: 'template1.html'} + , { name: 'template2.html', url: 'template2.html'} ]; + $scope.template = $scope.templates[0]; + } + </file> + <file name="template1.html"> + Content of template1.html + </file> + <file name="template2.html"> + Content of template2.html + </file> + <file name="scenario.js"> + it('should load template1.html', function() { + expect(element('.doc-example-live [ng-include]').text()). + toMatch(/Content of template1.html/); + }); + it('should load template2.html', function() { + select('template').option('1'); + expect(element('.doc-example-live [ng-include]').text()). + toMatch(/Content of template2.html/); + }); + it('should change to blank', function() { + select('template').option(''); + expect(element('.doc-example-live [ng-include]').text()).toEqual(''); + }); + </file> + </example> */ diff --git a/src/ng/directive/ngStyle.js b/src/ng/directive/ngStyle.js index c24c1b6d..30a266cd 100644 --- a/src/ng/directive/ngStyle.js +++ b/src/ng/directive/ngStyle.js @@ -13,15 +13,20 @@ * keys. * * @example - <doc:example> - <doc:source> + <example> + <file name="index.html"> <input type="button" value="set" ng-click="myStyle={color:'red'}"> <input type="button" value="clear" ng-click="myStyle={}"> <br/> <span ng-style="myStyle">Sample Text</span> <pre>myStyle={{myStyle}}</pre> - </doc:source> - <doc:scenario> + </file> + <file name="style.css"> + span { + color: black; + } + </file> + <file name="scenario.js"> it('should check ng-style', function() { expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)'); element('.doc-example-live :button[value=set]').click(); @@ -29,8 +34,8 @@ element('.doc-example-live :button[value=clear]').click(); expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)'); }); - </doc:scenario> - </doc:example> + </file> + </example> */ var ngStyleDirective = ngDirective(function(scope, element, attr) { scope.$watch(attr.ngStyle, function(newStyles, oldStyles) { diff --git a/src/ng/directive/ngView.js b/src/ng/directive/ngView.js index 16ae792e..7c737765 100644 --- a/src/ng/directive/ngView.js +++ b/src/ng/directive/ngView.js @@ -14,51 +14,8 @@ * * @scope * @example - <doc:example module="ngView"> - <doc:source> - <script type="text/ng-template" id="examples/book.html"> - controller: {{name}}<br /> - Book Id: {{params.bookId}}<br /> - </script> - - <script type="text/ng-template" id="examples/chapter.html"> - controller: {{name}}<br /> - Book Id: {{params.bookId}}<br /> - Chapter Id: {{params.chapterId}} - </script> - - <script> - angular.module('ngView', [], function($routeProvider, $locationProvider) { - $routeProvider.when('/Book/:bookId', { - template: 'examples/book.html', - controller: BookCntl - }); - $routeProvider.when('/Book/:bookId/ch/:chapterId', { - template: 'examples/chapter.html', - controller: ChapterCntl - }); - - // configure html5 to get links working on jsfiddle - $locationProvider.html5Mode(true); - }); - - function MainCntl($scope, $route, $routeParams, $location) { - $scope.$route = $route; - $scope.$location = $location; - $scope.$routeParams = $routeParams; - } - - function BookCntl($scope, $routeParams) { - $scope.name = "BookCntl"; - $scope.params = $routeParams; - } - - function ChapterCntl($scope, $routeParams) { - $scope.name = "ChapterCntl"; - $scope.params = $routeParams; - } - </script> - + <example module="ngView"> + <file name="index.html"> <div ng-controller="MainCntl"> Choose: <a href="Book/Moby">Moby</a> | @@ -76,8 +33,52 @@ <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre> <pre>$routeParams = {{$routeParams}}</pre> </div> - </doc:source> - <doc:scenario> + </file> + + <file name="book.html"> + controller: {{name}}<br /> + Book Id: {{params.bookId}}<br /> + </file> + + <file name="chapter.html"> + controller: {{name}}<br /> + Book Id: {{params.bookId}}<br /> + Chapter Id: {{params.chapterId}} + </file> + + <file name="script.js"> + angular.module('ngView', [], function($routeProvider, $locationProvider) { + $routeProvider.when('/Book/:bookId', { + template: 'book.html', + controller: BookCntl + }); + $routeProvider.when('/Book/:bookId/ch/:chapterId', { + template: 'chapter.html', + controller: ChapterCntl + }); + + // configure html5 to get links working on jsfiddle + $locationProvider.html5Mode(true); + }); + + function MainCntl($scope, $route, $routeParams, $location) { + $scope.$route = $route; + $scope.$location = $location; + $scope.$routeParams = $routeParams; + } + + function BookCntl($scope, $routeParams) { + $scope.name = "BookCntl"; + $scope.params = $routeParams; + } + + function ChapterCntl($scope, $routeParams) { + $scope.name = "ChapterCntl"; + $scope.params = $routeParams; + } + </file> + + <file name="scenario.js"> it('should load and compile correct template', function() { element('a:contains("Moby: Ch1")').click(); var content = element('.doc-example-live [ng-view]').text(); @@ -90,8 +91,8 @@ expect(content).toMatch(/controller\: BookCntl/); expect(content).toMatch(/Book Id\: Scarlet/); }); - </doc:scenario> - </doc:example> + </file> + </example> */ diff --git a/src/ng/directive/select.js b/src/ng/directive/select.js index dda59375..b269973f 100644 --- a/src/ng/directive/select.js +++ b/src/ng/directive/select.js @@ -75,7 +75,7 @@ <ul> <li ng-repeat="color in colors"> Name: <input ng-model="color.name"> - [<a href ng-click="colors.$remove(color)">X</a>] + [<a href ng-click="colors.splice($index, 1)">X</a>] </li> <li> [<a href ng-click="colors.push({})">add</a>] |