diff options
| author | Vojta Jina | 2011-11-29 21:51:59 -0800 | 
|---|---|---|
| committer | Vojta Jina | 2012-01-23 11:05:36 -0800 | 
| commit | 992c790f0786fa45c1cc3710f29bf49c7c322ba7 (patch) | |
| tree | 581d06ea9ba275a14d5891d83b2df03f9930bd45 /docs | |
| parent | f5343c9fd3c7cd0fefdb4d71d2b579dbae998d6a (diff) | |
| download | angular.js-992c790f0786fa45c1cc3710f29bf49c7c322ba7.tar.bz2 | |
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
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/content/api/angular.inputType.ngdoc | 16 | ||||
| -rw-r--r-- | docs/content/cookbook/advancedform.ngdoc | 61 | ||||
| -rw-r--r-- | docs/content/cookbook/deeplinking.ngdoc | 46 | ||||
| -rw-r--r-- | docs/content/cookbook/form.ngdoc | 18 | ||||
| -rw-r--r-- | docs/content/cookbook/helloworld.ngdoc | 4 | ||||
| -rw-r--r-- | docs/content/cookbook/mvc.ngdoc | 77 | ||||
| -rw-r--r-- | docs/content/guide/dev_guide.expressions.ngdoc | 16 | ||||
| -rw-r--r-- | docs/content/guide/dev_guide.forms.ngdoc | 72 | ||||
| -rw-r--r-- | docs/content/guide/dev_guide.overview.ngdoc | 6 | ||||
| -rw-r--r-- | docs/content/guide/dev_guide.templates.filters.creating_filters.ngdoc | 4 | ||||
| -rw-r--r-- | docs/src/templates/docs.js | 11 | 
11 files changed, 162 insertions, 169 deletions
| diff --git a/docs/content/api/angular.inputType.ngdoc b/docs/content/api/angular.inputType.ngdoc index 76a907d1..bfd5fe6f 100644 --- a/docs/content/api/angular.inputType.ngdoc +++ b/docs/content/api/angular.inputType.ngdoc @@ -40,8 +40,8 @@ All `inputType` widgets support:  <doc:example>  <doc:source>     <script> -     angular.inputType('json', function() { -       this.$parseView = function() { +     angular.inputType('json', function(element, scope) { +       scope.$parseView = function() {           try {             this.$modelValue = angular.fromJson(this.$viewValue);             if (this.$error.JSON) { @@ -52,19 +52,19 @@ All `inputType` widgets support:           }         } -       this.$parseModel = function() { +       scope.$parseModel = function() {           this.$viewValue = angular.toJson(this.$modelValue);         }       }); -     function Ctrl() { -       this.data = { +     function Ctrl($scope) { +       $scope.data = {           framework:'angular',           codenames:'supper-powers'         } -       this.required = false; -       this.disabled = false; -       this.readonly = false; +       $scope.required = false; +       $scope.disabled = false; +       $scope.readonly = false;       }     </script>     <div ng:controller="Ctrl"> diff --git a/docs/content/cookbook/advancedform.ngdoc b/docs/content/cookbook/advancedform.ngdoc index e973e30f..58a8dfd5 100644 --- a/docs/content/cookbook/advancedform.ngdoc +++ b/docs/content/cookbook/advancedform.ngdoc @@ -8,10 +8,8 @@ detection, and preventing invalid form submission.  <doc:example>  <doc:source>     <script> -   function UserForm() { -     this.state = /^\w\w$/; -     this.zip = /^\d\d\d\d\d$/; -     this.master = { +   function UserForm($scope) { +     var master = {         name: 'John Smith',         address:{           line1: '123 Main St.', @@ -23,40 +21,42 @@ detection, and preventing invalid form submission.           {type:'phone', value:'1(234) 555-1212'}         ]       }; -     this.cancel(); -   } -   UserForm.prototype = { -     cancel: function() { -       this.form = angular.copy(this.master); -     }, +     $scope.state = /^\w\w$/; +     $scope.zip = /^\d\d\d\d\d$/; -     save: function() { -       this.master = this.form; -       this.cancel(); -     }, +     $scope.cancel = function() { +       $scope.form = angular.copy(master); +     }; -     addContact: function() { -       this.form.contacts.push({type:'', value:''}); -     }, +     $scope.save = function() { +       master = $scope.form; +       $scope.cancel(); +     }; + +     $scope.addContact = function() { +       $scope.form.contacts.push({type:'', value:''}); +     }; -     removeContact: function(contact) { -       for ( var i = 0, ii = this.form.contacts.length; i < ii; i++) { -         if (contact === this.form.contacts[i]) { -           this.form.contacts.splice(i, 1); +     $scope.removeContact = function(contact) { +       var contacts = $scope.form.contacts; +       for (var i = 0, ii = contacts.length; i < ii; i++) { +         if (contact === contacts[i]) { +           contacts.splice(i, 1);           }         } -     }, +     }; -     isCancelDisabled: function() { -       return angular.equals(this.master, this.form); -     }, +     $scope.isCancelDisabled = function() { +       return angular.equals(master, $scope.form); +     }; -     isSaveDisabled: function() { -       return this.myForm.$invalid || angular.equals(this.master, this.form); -     } +     $scope.isSaveDisabled = function() { +       return $scope.myForm.$invalid || angular.equals(master, $scope.form); +     }; -   }; +     $scope.cancel(); +   }     </script>     <div ng:controller="UserForm"> @@ -91,8 +91,7 @@ detection, and preventing invalid form submission.     <hr/>     Debug View: -   <pre>form={{form}} -   master={{master}}</pre> +   <pre>form={{form}}</pre>     </div>  </doc:source>  <doc:scenario> diff --git a/docs/content/cookbook/deeplinking.ngdoc b/docs/content/cookbook/deeplinking.ngdoc index 2ef3da4a..a4dc3a9b 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:  <doc:example>   <doc:source jsfiddle="false">      <script> -     AppCntl.$inject = ['$route'] -     function AppCntl($route) { +     AppCntl.$inject = ['$scope', '$route'] +     function AppCntl($scope, $route) {        // define routes        $route.when("/welcome",  {template:'./examples/welcome.html',  controller:WelcomeCntl});        $route.when("/settings", {template:'./examples/settings.html', controller:SettingsCntl}); -      $route.parent(this); +      $route.parent($scope);        // initialize the model to something useful -      this.person = { +      $scope.person = {         name:'anonymous',         contacts:[{type:'email', url:'anonymous@example.com'}]        };       } -     function WelcomeCntl($route){} -     WelcomeCntl.prototype = { -      greet: function() { -       alert("Hello " + this.person.name); -      } -     }; - -     SettingsCntl.$inject = ['$location']; -     function SettingsCntl($location){ -      this.$location = $location; -      this.cancel(); +     function WelcomeCntl($scope) { +      $scope.greet = function() { +       alert("Hello " + $scope.person.name); +      }; +     } + +     function SettingsCntl($scope, $location) { +      $scope.cancel = function() { +       $scope.form = angular.copy($scope.person); +      }; + +      $scope.save = function() { +       angular.copy($scope.form, $scope.person); +       $location.path('/welcome'); +      }; + +      $scope.cancel();       } -     SettingsCntl.prototype = { -      cancel: function() { -       this.form = angular.copy(this.person); -      }, - -      save: function() { -       angular.copy(this.form, this.person); -       this.$location.path('/welcome'); -      } -     };      </script>      <div ng:controller="AppCntl">        <h1>Your App Chrome</h1> diff --git a/docs/content/cookbook/form.ngdoc b/docs/content/cookbook/form.ngdoc index 80c23e94..9371da7a 100644 --- a/docs/content/cookbook/form.ngdoc +++ b/docs/content/cookbook/form.ngdoc @@ -10,23 +10,23 @@ allow a user to enter data.  <doc:example>   <doc:source>    <script> -    function FormController() { -      this.user = { +    function FormController($scope) { +      $scope.user = {          name: 'John Smith',          address:{line1: '123 Main St.', city:'Anytown', state:'AA', zip:'12345'},          contacts:[{type:'phone', value:'1(234) 555-1212'}]        }; -      this.state = /^\w\w$/; -      this.zip = /^\d\d\d\d\d$/; +      $scope.state = /^\w\w$/; +      $scope.zip = /^\d\d\d\d\d$/; -      this.addContact = function() { -         this.user.contacts.push({type:'', value:''}); +      $scope.addContact = function() { +         $scope.user.contacts.push({type:'', value:''});        }; -      this.removeContact = function(contact) { -        for ( var i = 0, ii = this.user.contacts.length; i < ii; i++) { +      $scope.removeContact = function(contact) { +        for (var i = 0, ii = this.user.contacts.length; i < ii; i++) {            if (contact === this.user.contacts[i]) { -            this.user.contacts.splice(i, 1); +            $scope.user.contacts.splice(i, 1);            }          }        }; diff --git a/docs/content/cookbook/helloworld.ngdoc b/docs/content/cookbook/helloworld.ngdoc index e3d76d83..b6b5bcf7 100644 --- a/docs/content/cookbook/helloworld.ngdoc +++ b/docs/content/cookbook/helloworld.ngdoc @@ -5,8 +5,8 @@  <doc:example>   <doc:source>    <script> -    function HelloCntl() { -      this.name = 'World'; +    function HelloCntl($scope) { +      $scope.name = 'World';      }    </script>    <div ng:controller="HelloCntl"> diff --git a/docs/content/cookbook/mvc.ngdoc b/docs/content/cookbook/mvc.ngdoc index f566a541..71e771bd 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.  <doc:example>    <doc:source>      <script> -    function TicTacToeCntl($location){ -      this.$location = $location; -      this.cellStyle= { +    function TicTacToeCntl($scope, $location) { +      $scope.cellStyle= {          'height': '20px',          'width': '20px',          'border': '1px solid black', @@ -24,30 +23,40 @@ no connection between the controller and the view.          'vertical-align': 'middle',          'cursor': 'pointer'        }; -      this.reset(); -      this.$watch('$location.search().board', this.readUrl); -    } -    TicTacToeCntl.prototype = { -      dropPiece: function(row, col) { -        if (!this.winner && !this.board[row][col]) { -          this.board[row][col] = this.nextMove; -          this.nextMove = this.nextMove == 'X' ? 'O' : 'X'; -          this.setUrl(); -        } -      }, -      reset: function() { -        this.board = [ + +      $scope.reset = function() { +        $scope.board = [            ['', '', ''],            ['', '', ''],            ['', '', '']          ]; -        this.nextMove = 'X'; -        this.winner = ''; -        this.setUrl(); -      }, -      grade: function() { -        var b = this.board; -        this.winner = +        $scope.nextMove = 'X'; +        $scope.winner = ''; +        setUrl(); +      }; + +      $scope.dropPiece = function(row, col) { +        if (!$scope.winner && !$scope.board[row][col]) { +          $scope.board[row][col] = $scope.nextMove; +          $scope.nextMove = $scope.nextMove == 'X' ? 'O' : 'X'; +          setUrl(); +        } +      }; + +      $scope.reset(); +      $scope.$watch(function() { return $location.search().board;}, readUrl); + +      function setUrl() { +        var rows = []; +        angular.forEach($scope.board, function(row) { +          rows.push(row.join(',')); +        }); +        $location.search({board: rows.join(';') + '/' + $scope.nextMove}); +      } + +      function grade() { +        var b = $scope.board; +        $scope.winner =            row(0) || row(1) || row(2) ||            col(0) || col(1) || col(2) ||            diagonal(-1) || diagonal(1); @@ -55,25 +64,19 @@ no connection between the controller and the view.          function col(col) { return same(b[0][col], b[1][col], b[2][col]);}          function diagonal(i) { return same(b[0][1-i], b[1][1], b[2][1+i]);}          function same(a, b, c) { return (a==b && b==c) ? a : '';}; -      }, -      setUrl: function() { -        var rows = []; -        angular.forEach(this.board, function(row){ -          rows.push(row.join(',')); -        }); -        this.$location.search({board: rows.join(';') + '/' + this.nextMove}); -      }, -      readUrl: function(scope, value) { +      } + +      function readUrl(scope, value) {          if (value) {            value = value.split('/'); -          this.nextMove = value[1]; +          $scope.nextMove = value[1];            angular.forEach(value[0].split(';'), function(row, col){ -            this.board[col] = row.split(','); -          }, this); -          this.grade(); +            $scope.board[col] = row.split(','); +          }); +          grade();          }        } -    }; +    }      </script>      <h3>Tic-Tac-Toe</h3> diff --git a/docs/content/guide/dev_guide.expressions.ngdoc b/docs/content/guide/dev_guide.expressions.ngdoc index 4df69d28..b7ecc521 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:  <doc:example>  <doc:source>   <script> -   function Cntl2() { -     this.exprs = []; -     this.expr = '3*10|currency'; -     this.addExp = function(expr) { +   function Cntl2($scope) { +     $scope.exprs = []; +     $scope.expr = '3*10|currency'; +     $scope.addExp = function(expr) {          this.exprs.push(expr);       }; -     this.removeExp = function(contact) { +     $scope.removeExp = function(contact) {         for ( var i = 0, ii = this.exprs.length; i < ii; i++) {           if (contact === this.exprs[i]) {             this.exprs.splice(i, 1); @@ -101,10 +101,10 @@ the global state (a common source of subtle bugs).  <doc:example>  <doc:source>   <script> -   function Cntl1($window){ -     this.name = 'World'; +   function Cntl1($window, $scope){ +     $scope.name = 'World'; -     this.greet = function() { +     $scope.greet = function() {         ($window.mockWindow || $window).alert('Hello ' + this.name);       }     } diff --git a/docs/content/guide/dev_guide.forms.ngdoc b/docs/content/guide/dev_guide.forms.ngdoc index b4e37abd..03d0e6f9 100644 --- a/docs/content/guide/dev_guide.forms.ngdoc +++ b/docs/content/guide/dev_guide.forms.ngdoc @@ -111,10 +111,10 @@ The following example demonstrates:       .ng-form {display: block;}     </style>     <script> -   function UserFormCntl() { -     this.state = /^\w\w$/; -     this.zip = /^\d\d\d\d\d$/; -     this.master = { +   function UserFormCntl($scope) { +     $scope.state = /^\w\w$/; +     $scope.zip = /^\d\d\d\d\d$/; +     $scope.master = {         customer: 'John Smith',         address:{           line1: '123 Main St.', @@ -123,28 +123,26 @@ The following example demonstrates:           zip:'12345'         }       }; -     this.cancel(); -   } -   UserFormCntl.prototype = { -     cancel: function() { -       this.form = angular.copy(this.master); -     }, +     $scope.cancel = function() { +       $scope.form = angular.copy($scope.master); +     }; -     save: function() { -       this.master = this.form; -       this.cancel(); -     }, +     $scope.save = function() { +       $scope.master = $scope.form; +       $scope.cancel(); +     }; -     isCancelDisabled: function() { -       return angular.equals(this.master, this.form); -     }, +     $scope.isCancelDisabled = function() { +       return angular.equals($scope.master, $scope.form); +     }; -     isSaveDisabled: function() { -       return this.userForm.$invalid || angular.equals(this.master, this.form); -     } +     $scope.isSaveDisabled = function() { +       return $scope.userForm.$invalid || angular.equals($scope.master, $scope.form); +     }; -   }; +     $scope.cancel(); +   }     </script>     <div ng:controller="UserFormCntl"> @@ -282,15 +280,13 @@ This example shows how to implement a custom HTML editor widget in Angular.      <doc:example>        <doc:source>          <script> -          function EditorCntl() { -            this.htmlContent = '<b>Hello</b> <i>World</i>!'; +          function EditorCntl($scope) { +            $scope.htmlContent = '<b>Hello</b> <i>World</i>!';            } -          HTMLEditorWidget.$inject = ['$element', 'htmlFilter']; -          function HTMLEditorWidget(element, htmlFilter) { -            var self = this; - -            this.$parseModel = function() { +          HTMLEditorWidget.$inject = ['$element', '$scope', 'htmlFilter']; +          function HTMLEditorWidget(element, scope, htmlFilter) { +            scope.$parseModel = function() {                // need to protect for script injection                try {                  this.$viewValue = htmlFilter( @@ -305,13 +301,13 @@ This example shows how to implement a custom HTML editor widget in Angular.                }              } -            this.$render = function() { +            scope.$render = function() {                element.html(this.$viewValue);              }              element.bind('keyup', function() { -              self.$apply(function() { -                self.$emit('$viewChange', element.html()); +              scope.$apply(function() { +                scope.$emit('$viewChange', element.html());                });              });            } @@ -364,13 +360,13 @@ validation.  <doc:example>    <doc:source>       <script> -       function Ctrl() { -         this.input1 = ''; -         this.input2 = ''; -         this.input3 = 'A'; -         this.input4 = false; -         this.input5 = 'c'; -         this.input6 = []; +       function Ctrl($scope) { +         $scope.input1 = ''; +         $scope.input2 = ''; +         $scope.input3 = 'A'; +         $scope.input4 = false; +         $scope.input5 = 'c'; +         $scope.input6 = [];         }       </script>      <table style="font-size:.9em;" ng:controller="Ctrl"> diff --git a/docs/content/guide/dev_guide.overview.ngdoc b/docs/content/guide/dev_guide.overview.ngdoc index 5d308167..faf40af5 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:  <doc:example>  <doc:source>   <script> -   function InvoiceCntl() { -     this.qty = 1; -     this.cost = 19.95; +   function InvoiceCntl($scope) { +     $scope.qty = 1; +     $scope.cost = 19.95;     }   </script>   <div ng:controller="InvoiceCntl"> 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 98b41411..87894227 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';    }  </script> diff --git a/docs/src/templates/docs.js b/docs/src/templates/docs.js index 38a75236..bf279df5 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 : '');        }); -    } +    };    });  }); | 
