From 6a98c52c847ecc620118f3ccfdd66c3956c0fb01 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Wed, 7 Mar 2012 22:47:01 -0800 Subject: chore(compiler): change default restriction to attribute only for directives --- src/AngularPublic.js | 67 +++++++++++++++++----------------- src/directives.js | 31 ++++++++++------ src/service/compiler.js | 2 +- src/widget/form.js | 4 +-- src/widget/input.js | 4 +-- src/widget/select.js | 3 +- src/widgets.js | 95 ++++++++++++++++++++++++++++--------------------- 7 files changed, 117 insertions(+), 89 deletions(-) (limited to 'src') diff --git a/src/AngularPublic.js b/src/AngularPublic.js index 9d31601f..8ee8bc06 100644 --- a/src/AngularPublic.js +++ b/src/AngularPublic.js @@ -60,16 +60,13 @@ function publishExternalAPI(angular){ angularModule('ng', ['ngLocale'], ['$provide', function ngModule($provide) { - $provide.service('$anchorScroll', $AnchorScrollProvider); - $provide.service('$browser', $BrowserProvider); - $provide.service('$cacheFactory', $CacheFactoryProvider); $provide.service('$compile', $CompileProvider). directive({ a: htmlAnchorDirective, input: inputDirective, textarea: inputDirective, - form: ngFormDirective, - script: scriptTemplateLoader, + form: formDirective, + script: scriptDirective, select: selectDirective, style: styleDirective, onload: onloadDirective, @@ -84,7 +81,7 @@ function publishExternalAPI(angular){ ngClassOdd: ngClassOddDirective, ngCloak: ngCloakDirective, ngController: ngControllerDirective, - ngForm: ngFormDirective, + ngForm: formDirective, ngHide: ngHideDirective, ngInclude: ngIncludeDirective, ngInit: ngInitDirective, @@ -106,30 +103,36 @@ function publishExternalAPI(angular){ ngModelInstant: ngModelInstantDirective, required: requiredDirective, ngRequired: requiredDirective - }). - directive(ngEventDirectives). - directive(ngAttributeAliasDirectives); - $provide.service('$controller', $ControllerProvider); - $provide.service('$cookies', $CookiesProvider); - $provide.service('$cookieStore', $CookieStoreProvider); - $provide.service('$defer', $DeferProvider); - $provide.service('$document', $DocumentProvider); - $provide.service('$exceptionHandler', $ExceptionHandlerProvider); - $provide.service('$filter', $FilterProvider); - $provide.service('$interpolate', $InterpolateProvider); - $provide.service('$http', $HttpProvider); - $provide.service('$httpBackend', $HttpBackendProvider); - $provide.service('$location', $LocationProvider); - $provide.service('$log', $LogProvider); - $provide.service('$parse', $ParseProvider); - $provide.service('$resource', $ResourceProvider); - $provide.service('$route', $RouteProvider); - $provide.service('$routeParams', $RouteParamsProvider); - $provide.service('$rootScope', $RootScopeProvider); - $provide.service('$q', $QProvider); - $provide.service('$sanitize', $SanitizeProvider); - $provide.service('$sniffer', $SnifferProvider); - $provide.service('$templateCache', $TemplateCacheProvider); - $provide.service('$window', $WindowProvider); - }]); + }). + directive(ngAttributeAliasDirectives). + directive(ngEventDirectives); + $provide.service({ + $anchorScroll: $AnchorScrollProvider, + $browser: $BrowserProvider, + $cacheFactory: $CacheFactoryProvider, + $controller: $ControllerProvider, + $cookies: $CookiesProvider, + $cookieStore: $CookieStoreProvider, + $defer: $DeferProvider, + $document: $DocumentProvider, + $exceptionHandler: $ExceptionHandlerProvider, + $filter: $FilterProvider, + $interpolate: $InterpolateProvider, + $http: $HttpProvider, + $httpBackend: $HttpBackendProvider, + $location: $LocationProvider, + $log: $LogProvider, + $parse: $ParseProvider, + $resource: $ResourceProvider, + $route: $RouteProvider, + $routeParams: $RouteParamsProvider, + $rootScope: $RootScopeProvider, + $q: $QProvider, + $sanitize: $SanitizeProvider, + $sniffer: $SnifferProvider, + $templateCache: $TemplateCacheProvider, + $window: $WindowProvider + }); + } + ]); }; diff --git a/src/directives.js b/src/directives.js index c988bf7b..1fc7f1b5 100644 --- a/src/directives.js +++ b/src/directives.js @@ -1,5 +1,15 @@ 'use strict'; +function ngDirective(directive) { + if (isFunction(directive)) { + directive = { + link: directive + } + } + directive.restrict = directive.restrict || 'AC'; + return valueFn(directive); +}; + /** * @ngdoc directive * @name angular.module.ng.$compileProvider.directive.ng:init @@ -26,7 +36,7 @@ */ -var ngInitDirective = valueFn({ +var ngInitDirective = ngDirective({ compile: function() { return { pre: function(scope, element, attrs) { @@ -179,14 +189,14 @@ var ngControllerDirective = ['$controller', '$window', function($controller, $wi */ -var ngBindDirective = valueFn(function(scope, element, attr) { +var ngBindDirective = ngDirective(function(scope, element, attr) { element.addClass('ng-binding').data('$binding', attr.ngBind); scope.$watch(attr.ngBind, function(value) { element.text(value == undefined ? '' : value); }); }); -var ngBindHtmlUnsafeDirective = valueFn(function(scope, element, attr) { +var ngBindHtmlUnsafeDirective = ngDirective(function(scope, element, attr) { element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe); scope.$watch(attr.ngBindHtmlUnsafe, function(value) { element.html(value == undefined ? '' : value); @@ -572,7 +582,7 @@ forEach( */ -var ngSubmitDirective = valueFn(function(scope, element, attrs) { +var ngSubmitDirective = ngDirective(function(scope, element, attrs) { element.bind('submit', function() { scope.$apply(attrs.ngSubmit); }); @@ -581,7 +591,7 @@ var ngSubmitDirective = valueFn(function(scope, element, attrs) { function classDirective(name, selector) { name = 'ngClass' + name; - return valueFn(function(scope, element, attr) { + return ngDirective(function(scope, element, attr) { scope.$watch(attr[name], function(newVal, oldVal) { if (selector === true || scope.$index % 2 === selector) { if (oldVal && (newVal !== oldVal)) { @@ -754,7 +764,7 @@ var ngClassEvenDirective = classDirective('Even', 1); */ //TODO(misko): refactor to remove element from the DOM -var ngShowDirective = valueFn(function(scope, element, attr){ +var ngShowDirective = ngDirective(function(scope, element, attr){ scope.$watch(attr.ngShow, function(value){ element.css('display', toBoolean(value) ? '' : 'none'); }); @@ -793,7 +803,7 @@ var ngShowDirective = valueFn(function(scope, element, attr){ */ //TODO(misko): refactor to remove element from the DOM -var ngHideDirective = valueFn(function(scope, element, attr){ +var ngHideDirective = ngDirective(function(scope, element, attr){ scope.$watch(attr.ngHide, function(value){ element.css('display', toBoolean(value) ? 'none' : ''); }); @@ -831,7 +841,7 @@ var ngHideDirective = valueFn(function(scope, element, attr){ */ -var ngStyleDirective = valueFn(function(scope, element, attr) { +var ngStyleDirective = ngDirective(function(scope, element, attr) { scope.$watch(attr.ngStyle, function(newStyles, oldStyles) { if (oldStyles && (newStyles !== oldStyles)) { forEach(oldStyles, function(val, style) { element.css(style, '');}); @@ -894,7 +904,7 @@ var ngStyleDirective = valueFn(function(scope, element, attr) { * */ -var ngCloakDirective = valueFn({ +var ngCloakDirective = ngDirective({ compile: function(element, attr) { attr.$set(attr.$attr.ngCloak, undefined); element.removeClass('ng-cloak'); @@ -935,6 +945,7 @@ ngAttributeAliasDirective(null, 'src'); angular.module('transclude', []) .directive('pane', function(){ return { + restrict: 'E', transclude: true, scope: 'isolate', locals: { title:'bind' }, @@ -962,7 +973,7 @@ ngAttributeAliasDirective(null, 'src'); * */ -var ngTranscludeDirective = valueFn({ +var ngTranscludeDirective = ngDirective({ controller: ['$transclude', '$element', function($transclude, $element) { $transclude(function(clone) { $element.append(clone); diff --git a/src/service/compiler.js b/src/service/compiler.js index 43db1e9b..42c694ff 100644 --- a/src/service/compiler.js +++ b/src/service/compiler.js @@ -162,7 +162,7 @@ function $CompileProvider($provide) { directive.priority = directive.priority || 0; directive.name = directive.name || name; directive.require = directive.require || (directive.controller && directive.name); - directive.restrict = directive.restrict || 'EACM'; + directive.restrict = directive.restrict || 'A'; directives.push(directive); } catch (e) { $exceptionHandler(e); diff --git a/src/widget/form.js b/src/widget/form.js index 24f4ff42..e3823f41 100644 --- a/src/widget/form.js +++ b/src/widget/form.js @@ -117,7 +117,7 @@ FormController.prototype.registerWidget = function(widget, alias) { /** - * @ngdoc widget + * @ngdoc directive * @name angular.module.ng.$compileProvider.directive.form * * @scope @@ -204,7 +204,7 @@ FormController.prototype.registerWidget = function(widget, alias) { */ -var ngFormDirective = [function() { +var formDirective = [function() { return { name: 'form', restrict: 'E', diff --git a/src/widget/input.js b/src/widget/input.js index ecdb9d23..45d7d6a0 100644 --- a/src/widget/input.js +++ b/src/widget/input.js @@ -599,7 +599,7 @@ function checkboxInputType(scope, element, attr, ctrl) { /** - * @ngdoc widget + * @ngdoc directive * @name angular.module.ng.$compileProvider.directive.textarea * * @description @@ -623,7 +623,7 @@ function checkboxInputType(scope, element, attr, ctrl) { /** - * @ngdoc widget + * @ngdoc directive * @name angular.module.ng.$compileProvider.directive.input * * @description diff --git a/src/widget/select.js b/src/widget/select.js index f3c0f3dd..5ed1367f 100644 --- a/src/widget/select.js +++ b/src/widget/select.js @@ -1,7 +1,7 @@ 'use strict'; /** - * @ngdoc widget + * @ngdoc directive * @name angular.module.ng.$compileProvider.directive.select * * @description @@ -424,6 +424,7 @@ var selectDirective = ['$compile', '$parse', function($compile, $parse) { var optionDirective = ['$interpolate', function($interpolate) { return { + restrict: 'E', priority: 100, compile: function(element, attr) { if (isUndefined(attr.value)) { diff --git a/src/widgets.js b/src/widgets.js index 8bfd232d..4ea0553b 100644 --- a/src/widgets.js +++ b/src/widgets.js @@ -1,8 +1,9 @@ 'use strict'; /** - * @ngdoc widget + * @ngdoc directive * @name angular.module.ng.$compileProvider.directive.ng:include + * @restrict EA * * @description * Fetches, compiles and includes an external HTML fragment. @@ -42,22 +43,22 @@ url of the template: {{template.url}}
-
+
it('should load template1.html', function() { - expect(element('.doc-example-live .ng-include').text()). + 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()). + 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(''); + expect(element('.doc-example-live [ng-include]').text()).toEqual(''); }); @@ -65,6 +66,7 @@ var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile', function($http, $templateCache, $anchorScroll, $compile) { return { + restrict: 'EA', compile: function(element, attr) { var srcExp = attr.src, scopeExp = attr.scope || '', @@ -117,8 +119,9 @@ var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile' }]; /** - * @ngdoc widget + * @ngdoc directive * @name angular.module.ng.$compileProvider.directive.ng:switch + * @restrict EA * * @description * Conditionally change the DOM structure. @@ -176,6 +179,7 @@ var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile' */ var NG_SWITCH = 'ng-switch'; var ngSwitchDirective = valueFn({ + restrict: 'EA', compile: function(element, attr) { var watchExpr = attr.ngSwitch || attr.on, cases = {}; @@ -203,7 +207,7 @@ var ngSwitchDirective = valueFn({ } }); -var ngSwitchWhenDirective = valueFn({ +var ngSwitchWhenDirective = ngDirective({ transclude: 'element', priority: 500, compile: function(element, attrs, transclude) { @@ -213,7 +217,7 @@ var ngSwitchWhenDirective = valueFn({ } }); -var ngSwitchDefaultDirective = valueFn({ +var ngSwitchDefaultDirective = ngDirective({ transclude: 'element', priority: 500, compile: function(element, attrs, transclude) { @@ -312,7 +316,7 @@ var htmlAnchorDirective = valueFn({ */ -var ngRepeatDirective = valueFn({ +var ngRepeatDirective = ngDirective({ transclude: 'element', priority: 1000, terminal: true, @@ -436,7 +440,7 @@ var ngRepeatDirective = valueFn({ /** - * @ngdoc widget + * @ngdoc directive * @name angular.module.ng.$compileProvider.directive.ng:non-bindable * * @description @@ -466,12 +470,13 @@ var ngRepeatDirective = valueFn({ */ -var ngNonBindableDirective = valueFn({ terminal: true }); +var ngNonBindableDirective = ngDirective({ terminal: true }); /** - * @ngdoc widget + * @ngdoc directive * @name angular.module.ng.$compileProvider.directive.ng:view + * @restrict ECA * * @description * # Overview @@ -560,6 +565,7 @@ var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$c function($http, $templateCache, $route, $anchorScroll, $compile, $controller) { return { + restrict: 'ECA', terminal: true, link: function(scope, element) { var changeCounter = 0, @@ -619,8 +625,9 @@ var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$c /** - * @ngdoc widget + * @ngdoc directive * @name angular.module.ng.$compileProvider.directive.ng:pluralize + * @restrict EA * * @description * # Overview @@ -788,44 +795,49 @@ var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$c */ var ngPluralizeDirective = ['$locale', '$interpolate', function($locale, $interpolate) { var BRACE = /{}/g; - return function(scope, element, attr) { - var numberExp = attr.count, - whenExp = element.attr(attr.$attr.when), // this is becaues we have {{}} in attrs - offset = attr.offset || 0, - whens = scope.$eval(whenExp), - whensExpFns = {}; - - forEach(whens, function(expression, key) { - whensExpFns[key] = - $interpolate(expression.replace(BRACE, '{{' + numberExp + '-' + offset + '}}')); - }); - - scope.$watch(function() { - var value = parseFloat(scope.$eval(numberExp)); - - if (!isNaN(value)) { - //if explicit number rule such as 1, 2, 3... is defined, just use it. Otherwise, - //check it against pluralization rules in $locale service - if (!whens[value]) value = $locale.pluralCat(value - offset); - return whensExpFns[value](scope, element, true); - } else { - return ''; - } - }, function(newVal) { - element.text(newVal); - }); + return { + restrict: 'EA', + link: function(scope, element, attr) { + var numberExp = attr.count, + whenExp = element.attr(attr.$attr.when), // this is becaues we have {{}} in attrs + offset = attr.offset || 0, + whens = scope.$eval(whenExp), + whensExpFns = {}; + + forEach(whens, function(expression, key) { + whensExpFns[key] = + $interpolate(expression.replace(BRACE, '{{' + numberExp + '-' + offset + '}}')); + }); + + scope.$watch(function() { + var value = parseFloat(scope.$eval(numberExp)); + + if (!isNaN(value)) { + //if explicit number rule such as 1, 2, 3... is defined, just use it. Otherwise, + //check it against pluralization rules in $locale service + if (!whens[value]) value = $locale.pluralCat(value - offset); + return whensExpFns[value](scope, element, true); + } else { + return ''; + } + }, function(newVal) { + element.text(newVal); + }); + } }; }]; /** - * @ngdoc widget + * @ngdoc directive * @name angular.module.ng.$compileProvider.directive.script * * @description * Load content of a script tag, with type `text/ng-template`, into `$templateCache`, so that the * template can be used by `ng:include`, `ng:view` or directive templates. * + * @restrict E + * * @example @@ -844,8 +856,9 @@ var ngPluralizeDirective = ['$locale', '$interpolate', function($locale, $interp */ -var scriptTemplateLoader = ['$templateCache', function($templateCache) { +var scriptDirective = ['$templateCache', function($templateCache) { return { + restrict: 'E', terminal: true, compile: function(element, attr) { if (attr.type == 'text/ng-template') { -- cgit v1.2.3