From 992c790f0786fa45c1cc3710f29bf49c7c322ba7 Mon Sep 17 00:00:00 2001 From: Vojta Jina Date: Tue, 29 Nov 2011 21:51:59 -0800 Subject: [PATCH] refactor(scope): separate controller from scope Controller is standalone object, created using "new" operator, not messed up with scope anymore. Instead, related scope is injected as $scope. See design proposal: https://docs.google.com/document/pub?id=1SsgVj17ec6tnZEX3ugsvg0rVVR11wTso5Md-RdEmC0k Closes #321 Closes #425 Breaks controller methods are not exported to scope automatically Breaks Scope#$new() does not take controller as argument anymore --- docs/content/api/angular.inputType.ngdoc | 16 +-- docs/content/cookbook/advancedform.ngdoc | 61 +++++----- docs/content/cookbook/deeplinking.ngdoc | 46 ++++---- docs/content/cookbook/form.ngdoc | 18 +-- docs/content/cookbook/helloworld.ngdoc | 4 +- docs/content/cookbook/mvc.ngdoc | 77 +++++++------ .../content/guide/dev_guide.expressions.ngdoc | 16 +-- docs/content/guide/dev_guide.forms.ngdoc | 72 ++++++------ docs/content/guide/dev_guide.overview.ngdoc | 6 +- ...e.templates.filters.creating_filters.ngdoc | 4 +- docs/src/templates/docs.js | 11 +- example/personalLog/personalLog.js | 20 ++-- example/personalLog/test/personalLogSpec.js | 105 +++++++++--------- src/directives.js | 69 ++++++------ src/scenario/Runner.js | 11 +- src/service/compiler.js | 2 +- src/service/filter/filters.js | 16 +-- src/service/filter/limitTo.js | 6 +- src/service/filter/orderBy.js | 6 +- src/service/formFactory.js | 41 ++++--- src/service/http.js | 29 +++-- src/service/route.js | 10 +- src/service/scope.js | 19 +--- src/widget/form.js | 4 +- src/widget/input.js | 89 +++++++-------- src/widget/select.js | 38 +++---- src/widgets.js | 20 ++-- test/directivesSpec.js | 84 +++++++------- test/scenario/RunnerSpec.js | 3 - test/scenario/SpecRunnerSpec.js | 8 +- test/service/formFactorySpec.js | 22 ++-- test/service/routeSpec.js | 21 ++-- test/service/scopeSpec.js | 31 +----- test/widgetsSpec.js | 8 +- 34 files changed, 477 insertions(+), 516 deletions(-) diff --git a/docs/content/api/angular.inputType.ngdoc b/docs/content/api/angular.inputType.ngdoc index 76a907d11360..bfd5fe6f5d0b 100644 --- a/docs/content/api/angular.inputType.ngdoc +++ b/docs/content/api/angular.inputType.ngdoc @@ -40,8 +40,8 @@ All `inputType` widgets support:
diff --git a/docs/content/cookbook/advancedform.ngdoc b/docs/content/cookbook/advancedform.ngdoc index e973e30feeab..58a8dfd52cbb 100644 --- a/docs/content/cookbook/advancedform.ngdoc +++ b/docs/content/cookbook/advancedform.ngdoc @@ -8,10 +8,8 @@ detection, and preventing invalid form submission.
@@ -91,8 +91,7 @@ detection, and preventing invalid form submission.
Debug View: - 
form={{form}}
-   master={{master}}
+ 
form={{form}}
 diff --git a/docs/content/cookbook/deeplinking.ngdoc b/docs/content/cookbook/deeplinking.ngdoc index 2ef3da4a65e0..a4dc3a9bd794 100644 --- a/docs/content/cookbook/deeplinking.ngdoc +++ b/docs/content/cookbook/deeplinking.ngdoc @@ -39,42 +39,38 @@ The two partials are defined in the following URLs:

Your App Chrome

diff --git a/docs/content/cookbook/form.ngdoc b/docs/content/cookbook/form.ngdoc index 80c23e942cff..9371da7a53b2 100644 --- a/docs/content/cookbook/form.ngdoc +++ b/docs/content/cookbook/form.ngdoc @@ -10,23 +10,23 @@ allow a user to enter data.
diff --git a/docs/content/cookbook/mvc.ngdoc b/docs/content/cookbook/mvc.ngdoc index f566a541b13a..71e771bde084 100644 --- a/docs/content/cookbook/mvc.ngdoc +++ b/docs/content/cookbook/mvc.ngdoc @@ -14,9 +14,8 @@ no connection between the controller and the view.

Tic-Tac-Toe

diff --git a/docs/content/guide/dev_guide.expressions.ngdoc b/docs/content/guide/dev_guide.expressions.ngdoc index 4df69d28a4b4..b7ecc521f82c 100644 --- a/docs/content/guide/dev_guide.expressions.ngdoc +++ b/docs/content/guide/dev_guide.expressions.ngdoc @@ -51,14 +51,14 @@ You can try evaluating different expressions here:
@@ -282,15 +280,13 @@ This example shows how to implement a custom HTML editor widget in Angular. diff --git a/docs/content/guide/dev_guide.overview.ngdoc b/docs/content/guide/dev_guide.overview.ngdoc index 5d3081679a46..faf40af5fb4c 100644 --- a/docs/content/guide/dev_guide.overview.ngdoc +++ b/docs/content/guide/dev_guide.overview.ngdoc @@ -43,9 +43,9 @@ easier a web developer's life can if they're using angular:
diff --git a/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc b/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc index 98b4141160b1..87894227246d 100644 --- a/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc +++ b/docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc @@ -34,8 +34,8 @@ text upper-case and assigns color. } }); - function Ctrl() { - this.greeting = 'hello'; + function Ctrl($scope) { + $scope.greeting = 'hello'; } diff --git a/docs/src/templates/docs.js b/docs/src/templates/docs.js index 38a75236edc1..bf279df58364 100644 --- a/docs/src/templates/docs.js +++ b/docs/src/templates/docs.js @@ -1,9 +1,8 @@ -DocsController.$inject = ['$location', '$window', '$cookies', '$filter']; -function DocsController($location, $window, $cookies, $filter) { - window.$root = this.$root; +DocsController.$inject = ['$scope', '$location', '$window', '$cookies', '$filter']; +function DocsController(scope, $location, $window, $cookies, $filter) { + window.$root = scope.$root; - var scope = this, - OFFLINE_COOKIE_NAME = 'ng-offline', + var OFFLINE_COOKIE_NAME = 'ng-offline', DOCS_PATH = /^\/(api)|(guide)|(cookbook)|(misc)|(tutorial)/, INDEX_PATH = /^(\/|\/index[^\.]*.html)$/, filter = $filter('filter'); @@ -160,6 +159,6 @@ angular.module('ngdocs', [], function($locationProvider, $filterProvider) { return text && text.replace(/^angular\.module\.([^\.]+)(\.(.*))?$/, function(_, module, _0, name){ return 'Module ' + module + (name ? ' - ' + name : ''); }); - } + }; }); }); diff --git a/example/personalLog/personalLog.js b/example/personalLog/personalLog.js index 7be233cb4d20..4d1822273897 100644 --- a/example/personalLog/personalLog.js +++ b/example/personalLog/personalLog.js @@ -26,26 +26,26 @@ var LOGS = 'logs'; /** * The controller for the personal log app. */ -function LogCtrl($cookieStore) { - var self = this, - logs = self.logs = $cookieStore.get(LOGS) || []; //main model +function LogCtrl($cookieStore, $scope) { + + var logs = $scope.logs = $cookieStore.get(LOGS) || []; //main model /** * Adds newMsg to the logs array as a log, persists it and clears newMsg. * @param {string} msg Message to add (message is passed as parameter to make testing easier). */ - this.addLog = function(msg) { - var newMsg = msg || self.newMsg; + $scope.addLog = function(msg) { + var newMsg = msg || $scope.newMsg; if (!newMsg) return; var log = { at: new Date().getTime(), msg: newMsg - } + }; logs.push(log); $cookieStore.put(LOGS, logs); - self.newMsg = ''; + $scope.newMsg = ''; }; @@ -53,7 +53,7 @@ function LogCtrl($cookieStore) { * Persistently removes a log from logs. * @param {object} log The log to remove. */ - this.rmLog = function(log) { + $scope.rmLog = function(log) { for ( var i = 0; i < logs.length; i++) { if (log === logs[i]) { logs.splice(i, 1); @@ -68,14 +68,14 @@ function LogCtrl($cookieStore) { /** * Persistently removes all logs. */ - this.rmLogs = function() { + $scope.rmLogs = function() { logs.splice(0, logs.length); $cookieStore.remove(LOGS); }; } //inject -LogCtrl.$inject = ['$cookieStore']; +LogCtrl.$inject = ['$cookieStore', '$scope']; //export example.personalLog.LogCtrl = LogCtrl; diff --git a/example/personalLog/test/personalLogSpec.js b/example/personalLog/test/personalLogSpec.js index 9393e04720cf..ab2d98c9c79d 100644 --- a/example/personalLog/test/personalLogSpec.js +++ b/example/personalLog/test/personalLogSpec.js @@ -1,63 +1,58 @@ describe('example.personalLog.LogCtrl', function() { - var logCtrl; - - function createNotesCtrl() { - var injector = angular.injector(['ng', 'ngMock']); - var scope = injector.get('$rootScope'); - scope.$cookies = injector.get('$cookies'); - return scope.$new(example.personalLog.LogCtrl); - } - + var logScope; beforeEach(function() { - logCtrl = createNotesCtrl(); + var injector = angular.injector(['ng', 'ngMock']); + logScope = injector.get('$rootScope'); + logScope.$cookies = injector.get('$cookies'); + injector.instantiate(example.personalLog.LogCtrl, {$scope: logScope}); }); it('should initialize notes with an empty array', function() { - expect(logCtrl.logs).toEqual([]); + expect(logScope.logs).toEqual([]); }); describe('addLog', function() { beforeEach(function() { - expect(logCtrl.logs).toEqual([]); + expect(logScope.logs).toEqual([]); }); it('should add newMsg to logs as a log entry', function() { - logCtrl.newMsg = 'first log message'; - logCtrl.addLog(); + logScope.newMsg = 'first log message'; + logScope.addLog(); - expect(logCtrl.logs.length).toBe(1); - expect(logCtrl.logs[0].msg).toBe('first log message'); + expect(logScope.logs.length).toBe(1); + expect(logScope.logs[0].msg).toBe('first log message'); //one more msg, this time passed in as param - logCtrl.addLog('second log message'); + logScope.addLog('second log message'); - expect(logCtrl.logs.length).toBe(2); - expect(logCtrl.logs[0].msg).toBe('first log message'); - expect(logCtrl.logs[1].msg).toBe('second log message'); + expect(logScope.logs.length).toBe(2); + expect(logScope.logs[0].msg).toBe('first log message'); + expect(logScope.logs[1].msg).toBe('second log message'); }); it('should clear newMsg when log entry is persisted', function() { - logCtrl.addLog('first log message'); - expect(logCtrl.newMsg).toBe(''); + logScope.addLog('first log message'); + expect(logScope.newMsg).toBe(''); }); it('should store logs in the logs cookie', function() { - expect(logCtrl.$cookies.logs).not.toBeDefined(); - logCtrl.addLog('first log message'); - expect(logCtrl.$cookies.logs).toBeTruthy(); + expect(logScope.$cookies.logs).not.toBeDefined(); + logScope.addLog('first log message'); + expect(logScope.$cookies.logs).toBeTruthy(); }); it('should do nothing if newMsg is empty', function() { - logCtrl.addLog(''); - expect(logCtrl.logs.length).toBe(0); + logScope.addLog(''); + expect(logScope.logs.length).toBe(0); }); }); @@ -65,35 +60,35 @@ describe('example.personalLog.LogCtrl', function() { describe('rmLog', function() { beforeEach(function() { - logCtrl.addLog('message1'); - logCtrl.addLog('message2'); - logCtrl.addLog('message3'); - logCtrl.addLog('message4'); - expect(logCtrl.logs.length).toBe(4); + logScope.addLog('message1'); + logScope.addLog('message2'); + logScope.addLog('message3'); + logScope.addLog('message4'); + expect(logScope.logs.length).toBe(4); }); it('should delete a message identified by index', function() { - logCtrl.rmLog(logCtrl.logs[1]); - expect(logCtrl.logs.length).toBe(3); + logScope.rmLog(logScope.logs[1]); + expect(logScope.logs.length).toBe(3); - logCtrl.rmLog(logCtrl.logs[2]); - expect(logCtrl.logs.length).toBe(2); - expect(logCtrl.logs[0].msg).toBe('message1'); - expect(logCtrl.logs[1].msg).toBe('message3'); + logScope.rmLog(logScope.logs[2]); + expect(logScope.logs.length).toBe(2); + expect(logScope.logs[0].msg).toBe('message1'); + expect(logScope.logs[1].msg).toBe('message3'); }); it('should update cookies when a log is deleted', function() { - expect(logCtrl.$cookies.logs).toMatch(/\[\{.*?\}(,\{.*?\}){3}\]/); + expect(logScope.$cookies.logs).toMatch(/\[\{.*?\}(,\{.*?\}){3}\]/); - logCtrl.rmLog(logCtrl.logs[1]); - expect(logCtrl.$cookies.logs).toMatch(/\[\{.*?\}(,\{.*?\}){2}\]/); + logScope.rmLog(logScope.logs[1]); + expect(logScope.$cookies.logs).toMatch(/\[\{.*?\}(,\{.*?\}){2}\]/); - logCtrl.rmLog(logCtrl.logs[0]); - logCtrl.rmLog(logCtrl.logs[0]); - logCtrl.rmLog(logCtrl.logs[0]); - expect(logCtrl.$cookies.logs).toMatch(/\[\]/); + logScope.rmLog(logScope.logs[0]); + logScope.rmLog(logScope.logs[0]); + logScope.rmLog(logScope.logs[0]); + expect(logScope.$cookies.logs).toMatch(/\[\]/); }); }); @@ -101,24 +96,24 @@ describe('example.personalLog.LogCtrl', function() { describe('rmLogs', function() { beforeEach(function() { - logCtrl.addLog('message1'); - logCtrl.addLog('message2'); - logCtrl.addLog('message3'); - logCtrl.addLog('message4'); - expect(logCtrl.logs.length).toBe(4); + logScope.addLog('message1'); + logScope.addLog('message2'); + logScope.addLog('message3'); + logScope.addLog('message4'); + expect(logScope.logs.length).toBe(4); }); it('should remove all logs', function() { - logCtrl.rmLogs(); - expect(logCtrl.logs).toEqual([]); + logScope.rmLogs(); + expect(logScope.logs).toEqual([]); }); it('should remove logs cookie', function() { - expect(logCtrl.$cookies.logs).toBeTruthy(); - logCtrl.rmLogs(); - expect(logCtrl.$cookies.logs).not.toBeDefined(); + expect(logScope.$cookies.logs).toBeTruthy(); + logScope.rmLogs(); + expect(logScope.$cookies.logs).not.toBeDefined(); }); }); }); diff --git a/src/directives.js b/src/directives.js index 1d5b36f2da4b..53d03573a236 100644 --- a/src/directives.js +++ b/src/directives.js @@ -97,28 +97,30 @@ angularDirective("ng:init", function(expression){
Name: @@ -156,16 +158,15 @@ angularDirective("ng:init", function(expression){ */ -angularDirective("ng:controller", function(expression){ - this.scope(function(scope){ - var Controller = - getter(scope, expression, true) || - getter(window, expression, true); +angularDirective("ng:controller", function(expression) { + this.scope(true); + return ['$injector', '$window', function($injector, $window) { + var scope = this, + Controller = getter(scope, expression, true) || getter($window, expression, true); + assertArgFn(Controller, expression); - inferInjectionArgs(Controller); - return Controller; - }); - return noop; + $injector.instantiate(Controller, {$scope: scope}); + }]; }); /** @@ -189,8 +190,8 @@ angularDirective("ng:controller", function(expression){
@@ -277,9 +278,9 @@ angularDirective("ng:bind", function(expression, element){
@@ -363,8 +364,8 @@ angularDirective("ng:bind-template", function(expression, element){
@@ -470,10 +471,10 @@ angularDirective("ng:click", function(expression, element){
@@ -69,8 +69,8 @@ function currencyFilter($locale) {
@@ -448,8 +448,8 @@ var uppercaseFilter = valueFn(uppercase);
diff --git a/src/service/filter/orderBy.js b/src/service/filter/orderBy.js index 2e5a0286a323..c67d2769e7da 100644 --- a/src/service/filter/orderBy.js +++ b/src/service/filter/orderBy.js @@ -32,14 +32,14 @@
diff --git a/src/service/formFactory.js b/src/service/formFactory.js index 15a4733f8daf..565b22a43eae 100644 --- a/src/service/formFactory.js +++ b/src/service/formFactory.js @@ -25,15 +25,13 @@ diff --git a/src/service/route.js b/src/service/route.js index 77d94e9c3acc..04bcfdb6db3f 100644 --- a/src/service/route.js +++ b/src/service/route.js @@ -63,8 +63,8 @@ */ function $RouteProvider(){ - this.$get = ['$rootScope', '$location', '$routeParams', - function( $rootScope, $location, $routeParams) { + this.$get = ['$rootScope', '$location', '$routeParams', '$injector', + function( $rootScope, $location, $routeParams, $injector) { /** * @ngdoc event * @name angular.module.ng.$route#$beforeRouteChange @@ -278,8 +278,10 @@ function $RouteProvider(){ } } else { copy(next.params, $routeParams); - (Controller = next.controller) && inferInjectionArgs(Controller); - next.scope = parentScope.$new(Controller); + next.scope = parentScope.$new(); + if (next.controller) { + $injector.instantiate(next.controller, {$scope: next.scope}); + } } } $rootScope.$broadcast('$afterRouteChange', next, last); diff --git a/src/service/scope.js b/src/service/scope.js index fe72c953074b..089e4a41fc90 100644 --- a/src/service/scope.js +++ b/src/service/scope.js @@ -126,8 +126,9 @@ function $RootScopeProvider(){ * @function * * @description - * Creates a new child {@link angular.module.ng.$rootScope.Scope scope}. The new scope can optionally behave as a - * controller. The parent scope will propagate the {@link angular.module.ng.$rootScope.Scope#$digest $digest()} and + * Creates a new child {@link angular.module.ng.$rootScope.Scope scope}. + * + * The parent scope will propagate the {@link angular.module.ng.$rootScope.Scope#$digest $digest()} and * {@link angular.module.ng.$rootScope.Scope#$digest $digest()} events. The scope can be removed from the scope * hierarchy using {@link angular.module.ng.$rootScope.Scope#$destroy $destroy()}. * @@ -135,13 +136,10 @@ function $RootScopeProvider(){ * the scope and its child scopes to be permanently detached from the parent and thus stop * participating in model change detection and listener notification by invoking. * - * @param {function()=} Class Constructor function which the scope should be applied to the scope. - * @param {...*} curryArguments Any additional arguments which are curried into the constructor. - * See {@link guide/dev_guide.di dependency injection}. * @returns {Object} The newly created child scope. * */ - $new: function(Class, curryArguments) { + $new: function() { var Child = function() {}; // should be anonymous; This is so that when the minifier munges // the name it does not become random set of chars. These will then show up as class // name in the debugger. @@ -161,15 +159,6 @@ function $RootScopeProvider(){ } else { this.$$childHead = this.$$childTail = child; } - // short circuit if we have no class - if (Class) { - // can't use forEach, we need speed! - var ClassPrototype = Class.prototype; - for(var key in ClassPrototype) { - child[key] = bind(child, ClassPrototype[key]); - } - $injector.invoke(Class, child, curryArguments); - } return child; }, diff --git a/src/widget/form.js b/src/widget/form.js index 49e3a54529c7..f3134db49bfe 100644 --- a/src/widget/form.js +++ b/src/widget/form.js @@ -52,8 +52,8 @@
diff --git a/src/widget/input.js b/src/widget/input.js index a744e567e868..5db52704c4e3 100644 --- a/src/widget/input.js +++ b/src/widget/input.js @@ -31,9 +31,9 @@ var INTEGER_REGEXP = /^\s*(\-|\+)?\d+\s*$/;
@@ -96,8 +96,8 @@ var INTEGER_REGEXP = /^\s*(\-|\+)?\d+\s*$/;
@@ -136,9 +136,8 @@ var INTEGER_REGEXP = /^\s*(\-|\+)?\d+\s*$/; */ -angularInputType('email', function() { - var widget = this; - this.$on('$validate', function(event){ +angularInputType('email', function(element, widget) { + widget.$on('$validate', function(event) { var value = widget.$viewValue; widget.$emit(!value || value.match(EMAIL_REGEXP) ? "$valid" : "$invalid", "EMAIL"); }); @@ -170,8 +169,8 @@ angularInputType('email', function() {
@@ -210,9 +209,8 @@ angularInputType('email', function() { */ -angularInputType('url', function() { - var widget = this; - this.$on('$validate', function(event){ +angularInputType('url', function(element, widget) { + widget.$on('$validate', function(event) { var value = widget.$viewValue; widget.$emit(!value || value.match(URL_REGEXP) ? "$valid" : "$invalid", "URL"); }); @@ -239,8 +237,8 @@ angularInputType('url', function() {
@@ -270,7 +268,7 @@ angularInputType('url', function() { */ -angularInputType('list', function() { +angularInputType('list', function(element, widget) { function parse(viewValue) { var list = []; forEach(viewValue.split(/\s*,\s*/), function(value){ @@ -278,14 +276,14 @@ angularInputType('list', function() { }); return list; } - this.$parseView = function() { - isString(this.$viewValue) && (this.$modelValue = parse(this.$viewValue)); + widget.$parseView = function() { + isString(widget.$viewValue) && (widget.$modelValue = parse(widget.$viewValue)); }; - this.$parseModel = function() { - var modelValue = this.$modelValue; + widget.$parseModel = function() { + var modelValue = widget.$modelValue; if (isArray(modelValue) - && (!isString(this.$viewValue) || !equals(parse(this.$viewValue), modelValue))) { - this.$viewValue = modelValue.join(', '); + && (!isString(widget.$viewValue) || !equals(parse(widget.$viewValue), modelValue))) { + widget.$viewValue = modelValue.join(', '); } }; }); @@ -318,8 +316,8 @@ angularInputType('list', function() {
@@ -388,8 +386,8 @@ angularInputType('number', numericRegexpInputType(NUMBER_REGEXP, 'NUMBER'));
@@ -449,9 +447,9 @@ angularInputType('integer', numericRegexpInputType(INTEGER_REGEXP, 'INTEGER'));
@@ -477,9 +475,8 @@ angularInputType('integer', numericRegexpInputType(INTEGER_REGEXP, 'INTEGER')); */ -angularInputType('checkbox', function(inputElement) { - var widget = this, - trueValue = inputElement.attr('ng:true-value'), +angularInputType('checkbox', function(inputElement, widget) { + var trueValue = inputElement.attr('ng:true-value'), falseValue = inputElement.attr('ng:false-value'); if (!isString(trueValue)) trueValue = true; @@ -496,7 +493,7 @@ angularInputType('checkbox', function(inputElement) { }; widget.$parseModel = function() { - widget.$viewValue = this.$modelValue === trueValue; + widget.$viewValue = widget.$modelValue === trueValue; }; widget.$parseView = function() { @@ -522,8 +519,8 @@ angularInputType('checkbox', function(inputElement) {
@@ -545,9 +542,7 @@ angularInputType('checkbox', function(inputElement) { */ -angularInputType('radio', function(inputElement) { - var widget = this; - +angularInputType('radio', function(inputElement, widget) { //correct the name inputElement.attr('name', widget.$id + '@' + inputElement.attr('name')); inputElement.bind('click', function() { @@ -569,9 +564,8 @@ angularInputType('radio', function(inputElement) { function numericRegexpInputType(regexp, error) { - return ['$element', function(inputElement) { - var widget = this, - min = 1 * (inputElement.attr('min') || Number.MIN_VALUE), + return function(inputElement, widget) { + var min = 1 * (inputElement.attr('min') || Number.MIN_VALUE), max = 1 * (inputElement.attr('max') || Number.MAX_VALUE); widget.$on('$validate', function(event){ @@ -598,7 +592,7 @@ function numericRegexpInputType(regexp, error) { ? '' + widget.$modelValue : ''; }; - }]; + }; } @@ -640,8 +634,8 @@ var HTML5_INPUTS_TYPES = makeMap(
@@ -713,7 +707,8 @@ angularWidget('input', function(inputElement){ this.descend(true); var modelExp = inputElement.attr('ng:model'); return modelExp && - ['$defer', '$formFactory', '$element', function($defer, $formFactory, inputElement){ + ['$defer', '$formFactory', '$element', + function($defer, $formFactory, inputElement) { var form = $formFactory.forElement(inputElement), // We have to use .getAttribute, since jQuery tries to be smart and use the // type property. Trouble is some browser change unknown to text. @@ -762,7 +757,7 @@ angularWidget('input', function(inputElement){ } //TODO(misko): setting $inject is a hack - !TypeController.$inject && (TypeController.$inject = ['$element']); + !TypeController.$inject && (TypeController.$inject = ['$element', '$scope']); widget = form.$createWidget({ scope: modelScope, model: modelExp, @@ -866,7 +861,7 @@ angularWidget('textarea', angularWidget('input')); function watchElementProperty(modelScope, widget, name, element) { var bindAttr = fromJson(element.attr('ng:bind-attr') || '{}'), - match = /\s*{{(.*)}}\s*/.exec(bindAttr[name]), + match = /\s*\{\{(.*)\}\}\s*/.exec(bindAttr[name]), isBoolean = BOOLEAN_ATTR[name]; widget['$' + name] = isBoolean ? ( // some browsers return true some '' when required is set without value. diff --git a/src/widget/select.js b/src/widget/select.js index d4be91d915dd..b0f5eac587c7 100644 --- a/src/widget/select.js +++ b/src/widget/select.js @@ -65,15 +65,15 @@
@@ -140,11 +140,11 @@ angularWidget('select', function(element){ optionsExp = selectElement.attr('ng:options'), modelExp = selectElement.attr('ng:model'), widget = form.$createWidget({ - scope: this, + scope: modelScope, model: modelExp, onChange: selectElement.attr('ng:change'), alias: selectElement.attr('name'), - controller: optionsExp ? Options : (multiple ? Multiple : Single)}); + controller: ['$scope', optionsExp ? Options : (multiple ? Multiple : Single)]}); selectElement.bind('$destroy', function() { widget.$destroy(); }); @@ -174,11 +174,9 @@ angularWidget('select', function(element){ //////////////////////////// - function Multiple() { - var widget = this; - - this.$render = function() { - var items = new HashMap(this.$viewValue); + function Multiple(widget) { + widget.$render = function() { + var items = new HashMap(widget.$viewValue); forEach(selectElement.children(), function(option){ option.selected = isDefined(items.get(option.value)); }); @@ -198,9 +196,7 @@ angularWidget('select', function(element){ } - function Single() { - var widget = this; - + function Single(widget) { widget.$render = function() { selectElement.val(widget.$viewValue); }; @@ -214,9 +210,8 @@ angularWidget('select', function(element){ widget.$viewValue = selectElement.val(); } - function Options() { - var widget = this, - match; + function Options(widget) { + var match; if (! (match = optionsExp.match(NG_OPTIONS_REGEXP))) { throw Error( @@ -224,8 +219,7 @@ angularWidget('select', function(element){ " but got '" + optionsExp + "'."); } - var widgetScope = this, - displayFn = $parse(match[2] || match[1]), + var displayFn = $parse(match[2] || match[1]), valueName = match[4] || match[6], keyName = match[5], groupByFn = $parse(match[3] || ''), @@ -253,7 +247,7 @@ angularWidget('select', function(element){ selectElement.html(''); // clear contents selectElement.bind('change', function() { - widgetScope.$apply(function() { + widget.$apply(function() { var optionGroup, collection = valuesFn(modelScope) || [], key = selectElement.val(), @@ -288,13 +282,13 @@ angularWidget('select', function(element){ } } if (isDefined(value) && modelScope.$viewVal !== value) { - widgetScope.$emit('$viewChange', value); + widget.$emit('$viewChange', value); } }); }); - widgetScope.$watch(render); - widgetScope.$render = render; + widget.$watch(render); + widget.$render = render; function render() { var optionGroups = {'':[]}, // Temporary location for the option groups before we render them diff --git a/src/widgets.js b/src/widgets.js index 09a800de65c0..6b3e93ee6db6 100644 --- a/src/widgets.js +++ b/src/widgets.js @@ -54,11 +54,11 @@
@@ -171,9 +171,9 @@ angularWidget('ng:include', function(element){
@@ -701,10 +701,10 @@ angularWidget('ng:view', function(element) {
diff --git a/test/directivesSpec.js b/test/directivesSpec.js index 1825dc492829..7600a9c8a855 100644 --- a/test/directivesSpec.js +++ b/test/directivesSpec.js @@ -460,60 +460,66 @@ describe("directive", function() { }); describe('ng:controller', function() { + var element; - var temp; + beforeEach(inject(function($window) { + $window.Greeter = function($scope) { + // private stuff (not exported to scope) + this.prefix = 'Hello '; - beforeEach(function() { - temp = window.temp = {}; - temp.Greeter = function() { - this.$root.greeter = this; - this.greeting = 'hello'; - this.suffix = '!'; + // public stuff (exported to scope) + var ctrl = this; + $scope.name = 'Misko'; + $scope.greet = function(name) { + return ctrl.prefix + name + ctrl.suffix; + }; + + $scope.protoGreet = bind(this, this.protoGreet); }; - temp.Greeter.prototype = { - greet: function(name) { - return this.greeting + ' ' + name + this.suffix; + $window.Greeter.prototype = { + suffix: '!', + protoGreet: function(name) { + return this.prefix + name + this.suffix; } }; - }); + + $window.Child = function($scope) { + $scope.name = 'Adam'; + }; + })); afterEach(function() { - window.temp = undefined; + dealoc(element); }); - it('should bind', inject(function($rootScope, $compile) { - var element = $compile('
')($rootScope); - expect($rootScope.greeter.greeting).toEqual('hello'); - expect($rootScope.greeter.greet('misko')).toEqual('hello misko!'); + + it('should instantiate controller and bind methods', inject(function($compile, $rootScope) { + element = $compile('
{{greet(name)}}
')($rootScope); + $rootScope.$digest(); + expect(element.text()).toBe('Hello Misko!'); })); - it('should support nested controllers', inject(function($rootScope, $compile) { - temp.ChildGreeter = function() { - this.greeting = 'hey'; - this.$root.childGreeter = this; - }; - temp.ChildGreeter.prototype = { - greet: function() { - return this.greeting + ' dude' + this.suffix; - } - }; - var element = $compile('
{{greet("misko")}}
')($rootScope); - expect($rootScope.greeting).not.toBeDefined(); - expect($rootScope.greeter.greeting).toEqual('hello'); - expect($rootScope.greeter.greet('misko')).toEqual('hello misko!'); - expect($rootScope.greeter.greeting).toEqual('hello'); - expect($rootScope.childGreeter.greeting).toEqual('hey'); - expect($rootScope.childGreeter.$parent.greeting).toEqual('hello'); + + it('should allow nested controllers', inject(function($compile, $rootScope) { + element = $compile('
{{greet(name)}}
')($rootScope); + $rootScope.$digest(); + expect(element.text()).toBe('Hello Adam!'); + dealoc(element); + + element = $compile('
{{protoGreet(name)}}
')($rootScope); $rootScope.$digest(); - expect(element.text()).toEqual('hey dude!'); + expect(element.text()).toBe('Hello Adam!'); })); - it('should infer injection arguments', inject(function($rootScope, $compile, $http) { - temp.MyController = function($http) { - this.$root.someService = $http; + + it('should instantiate controller defined on scope', inject(function($compile, $rootScope) { + $rootScope.Greeter = function($scope) { + $scope.name = 'Vojta'; }; - var element = $compile('
')($rootScope); - expect($rootScope.someService).toBe($http); + + element = $compile('
{{name}}
')($rootScope); + $rootScope.$digest(); + expect(element.text()).toBe('Vojta'); })); }); diff --git a/test/scenario/RunnerSpec.js b/test/scenario/RunnerSpec.js index 15bcc4b03eaf..c4ad6f95bbf7 100644 --- a/test/scenario/RunnerSpec.js +++ b/test/scenario/RunnerSpec.js @@ -43,9 +43,6 @@ describe('angular.scenario.Runner', function() { location: {} }; runner = new angular.scenario.Runner($window); - runner.createSpecRunner_ = function(scope) { - return scope.$new(MockSpecRunner); - }; runner.on('SpecError', angular.mock.rethrow); runner.on('StepError', angular.mock.rethrow); }); diff --git a/test/scenario/SpecRunnerSpec.js b/test/scenario/SpecRunnerSpec.js index 4cffc63aa684..c104a9b73dd9 100644 --- a/test/scenario/SpecRunnerSpec.js +++ b/test/scenario/SpecRunnerSpec.js @@ -40,7 +40,13 @@ describe('angular.scenario.SpecRunner', function() { }; $root.application = new ApplicationMock($window); $root.$window = $window; - runner = $root.$new(angular.scenario.SpecRunner); + runner = $root.$new(); + + var Cls = angular.scenario.SpecRunner; + for (var name in Cls.prototype) + runner[name] = angular.bind(runner, Cls.prototype[name]); + + Cls.call(runner); })); it('should bind futures to the spec', function() { diff --git a/test/service/formFactorySpec.js b/test/service/formFactorySpec.js index fbe601c6ea03..1a23aa494228 100644 --- a/test/service/formFactorySpec.js +++ b/test/service/formFactorySpec.js @@ -13,23 +13,24 @@ describe('$formFactory', function() { var scope; var log; - function WidgetCtrl($formFactory){ - this.$formFactory = $formFactory; + function WidgetCtrl($formFactory, $scope) { log += ''; - this.$render = function() { + $scope.$render = function() { log += '$render();'; }; - this.$on('$validate', function(e){ + $scope.$on('$validate', function(e){ log += '$validate();'; }); + + this.$formFactory = $formFactory; } - WidgetCtrl.$inject = ['$formFactory']; + WidgetCtrl.$inject = ['$formFactory', '$scope']; WidgetCtrl.prototype = { - getFormFactory: function() { - return this.$formFactory; - } + getFormFactory: function() { + return this.$formFactory; + } }; beforeEach(inject(function($rootScope, $formFactory) { @@ -70,11 +71,6 @@ describe('$formFactory', function() { expect(widget.$modelValue).toEqual('xyz'); })); - - - it('should have controller prototype methods', inject(function($rootScope, $formFactory) { - expect(widget.getFormFactory()).toEqual($formFactory); - })); }); diff --git a/test/service/routeSpec.js b/test/service/routeSpec.js index 95560d29c284..1bb1312f7ea4 100644 --- a/test/service/routeSpec.js +++ b/test/service/routeSpec.js @@ -112,7 +112,7 @@ describe('$route', function() { inject(function($route, $location, $rootScope) { var onChangeSpy = jasmine.createSpy('onChange'); - function NotFoundCtrl() {this.notFoundProp = 'not found!';} + function NotFoundCtrl($scope) {$scope.notFoundProp = 'not found!';} $route.when('/foo', {template: 'foo.html'}); $route.otherwise({template: '404.html', controller: NotFoundCtrl}); @@ -169,10 +169,11 @@ describe('$route', function() { it('should infer arguments in injection', inject(function($route, $location, $rootScope) { - $route.when('/test', {controller: function($route){ this.$route = $route; }}); + var injectedRoute; + $route.when('/test', {controller: function($route) {injectedRoute = $route;}}); $location.path('/test'); $rootScope.$digest(); - expect($route.current.scope.$route).toBe($route); + expect(injectedRoute).toBe($route); })); @@ -304,9 +305,9 @@ describe('$route', function() { $route.when('/foo', {controller: FooCtrl, reloadOnSearch: false}); $rootScope.$on('$beforeRouteChange', reloaded); - function FooCtrl() { + function FooCtrl($scope) { reloaded(); - this.$on('$routeUpdate', routeUpdateEvent); + $scope.$on('$routeUpdate', routeUpdateEvent); } expect(reloaded).not.toHaveBeenCalled(); @@ -368,8 +369,8 @@ describe('$route', function() { $route.when('/foo', {controller: FooCtrl}); $route.when('/bar/:barId', {controller: FooCtrl, reloadOnSearch: false}); - function FooCtrl() { - this.$watch(function() { + function FooCtrl($scope) { + $scope.$watch(function() { return $route.current.params; }, function(scope, value) { routeParams(value); @@ -414,10 +415,10 @@ describe('$route', function() { } function createController(name) { - return function() { + return function($scope) { log.push('init-' + name); - this.$on('$destroy', logger('destroy-' + name)); - this.$on('$routeUpdate', logger('route-update')); + $scope.$on('$destroy', logger('destroy-' + name)); + $scope.$on('$routeUpdate', logger('route-update')); }; } diff --git a/test/service/scopeSpec.js b/test/service/scopeSpec.js index 96271bc9aea4..68ef2834dcbe 100644 --- a/test/service/scopeSpec.js +++ b/test/service/scopeSpec.js @@ -53,35 +53,6 @@ describe('Scope', function() { $rootScope.a = 123; expect(child.a).toEqual(123); })); - - - it('should instantiate controller and bind functions', inject(function($rootScope) { - function Cntl($browser, name) { - this.$browser = $browser; - this.callCount = 0; - this.name = name; - } - Cntl.$inject = ['$browser', 'name']; - - Cntl.prototype = { - myFn: function() { - expect(this).toEqual(cntl); - this.callCount++; - } - }; - - var cntl = $rootScope.$new(Cntl, {name:'misko'}); - - expect($rootScope.$browser).toBeUndefined(); - expect($rootScope.myFn).toBeUndefined(); - - expect(cntl.$browser).toBeDefined(); - expect(cntl.name).toEqual('misko'); - - cntl.myFn(); - cntl.$new().myFn(); - expect(cntl.callCount).toEqual(2); - })); }); @@ -341,7 +312,7 @@ describe('Scope', function() { $rootScope.$digest(); expect(isNaN(log.shift())).toBe(true); //jasmine's toBe and toEqual don't work well with NaNs expect(log).toEqual([undefined, '', false, {}, 23]); - log = [] + log = []; $rootScope.$digest(); expect(log).toEqual([]); })); diff --git a/test/widgetsSpec.js b/test/widgetsSpec.js index f119174f791b..88d9e1b8f8b6 100644 --- a/test/widgetsSpec.js +++ b/test/widgetsSpec.js @@ -713,12 +713,12 @@ describe('widget', function() { $route.when('/foo', {controller: ParentCtrl, template: 'viewPartial.html'}); $rootScope.log = []; - function ParentCtrl() { - this.log.push('parent'); + function ParentCtrl($scope) { + $scope.log.push('parent'); } - $rootScope.ChildCtrl = function() { - this.log.push('child'); + $rootScope.ChildCtrl = function($scope) { + $scope.log.push('child'); }; $location.path('/foo');