From 2859fc408e402213877a18c79e8d2c69b2bfc049 Mon Sep 17 00:00:00 2001 From: Peter Bacon Darwin Date: Tue, 27 May 2014 22:43:37 +0100 Subject: [PATCH] docs(ngController): add formatting to `controller as` description and example Adds to #7591 --- src/ng/directive/ngController.js | 339 ++++++++++++++++--------------- 1 file changed, 177 insertions(+), 162 deletions(-) diff --git a/src/ng/directive/ngController.js b/src/ng/directive/ngController.js index 9e7e3a80..3ad2cfbe 100644 --- a/src/ng/directive/ngController.js +++ b/src/ng/directive/ngController.js @@ -34,168 +34,183 @@ * easily be called from the angular markup. Any changes to the data are automatically reflected * in the View without the need for a manual update. * - * Two different declaration styles are included below: one which injects `scope` into the - * controller, and another which instead binds methods and properties directly onto the controller - * using `this`. The first option is more common in the Angular community, and is generally used - * in boilerplates and in this guide. However, there are advantages to binding properties directly - * to the controller and avoiding scope. Using `controller as` makes it obvious which controller - * you are accessing in the template when multiple controllers apply to an element. Since there - * is always a `.` in the bindings, you don't have to worry about prototypal inheritance masking - * primitives. - - - -
- Name: - [ greet ]
- Contact: -
    -
  • - - - [ clear - | X ] -
    • -
  • [ add ]
    • -
-
- - - it('should check controller as', function() { - var container = element(by.id('ctrl-as-exmpl')); - - expect(container.findElement(by.model('settings.name')) - .getAttribute('value')).toBe('John Smith'); - - var firstRepeat = - container.findElement(by.repeater('contact in settings.contacts').row(0)); - var secondRepeat = - container.findElement(by.repeater('contact in settings.contacts').row(1)); - - expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value')) - .toBe('408 555 1212'); - expect(secondRepeat.findElement(by.model('contact.value')).getAttribute('value')) - .toBe('john.smith@example.org'); - - firstRepeat.findElement(by.linkText('clear')).click(); - - expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value')) - .toBe(''); - - container.findElement(by.linkText('add')).click(); - - expect(container.findElement(by.repeater('contact in settings.contacts').row(2)) - .findElement(by.model('contact.value')) - .getAttribute('value')) - .toBe('yourname@example.org'); - }); - - - - - -
- Name: - [ greet ]
- Contact: -
    -
  • - - - [ clear - | X ] -
    • -
  • [ add ]
    • -
-
- - - it('should check controller', function() { - var container = element(by.id('ctrl-exmpl')); - - expect(container.findElement(by.model('name')) - .getAttribute('value')).toBe('John Smith'); - - var firstRepeat = - container.findElement(by.repeater('contact in contacts').row(0)); - var secondRepeat = - container.findElement(by.repeater('contact in contacts').row(1)); - - expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value')) - .toBe('408 555 1212'); - expect(secondRepeat.findElement(by.model('contact.value')).getAttribute('value')) - .toBe('john.smith@example.org'); - - firstRepeat.findElement(by.linkText('clear')).click(); - - expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value')) - .toBe(''); - - container.findElement(by.linkText('add')).click(); - - expect(container.findElement(by.repeater('contact in contacts').row(2)) - .findElement(by.model('contact.value')) - .getAttribute('value')) - .toBe('yourname@example.org'); - }); - - + * Two different declaration styles are included below: + * + * * one binds methods and properties directly onto the controller using `this`: + * `ng-controller="SettingsController1 as settings"` + * * one injects `$scope` into the controller: + * `ng-controller="SettingsController2"` + * + * The second option is more common in the Angular community, and is generally used in boilerplates + * and in this guide. However, there are advantages to binding properties directly to the controller + * and avoiding scope. + * + * * Using `controller as` makes it obvious which controller you are accessing in the template when + * multiple controllers apply to an element. + * * If you are writing your controllers as classes you have easier access to the properties and + * methods, which will appear on the scope, from inside the controller code. + * * Since there is always a `.` in the bindings, you don't have to worry about prototypal + * inheritance masking primitives. + * + * This example demonstrates the `controller as` syntax. + * + * + * + *
+ * Name: + * [ greet ]
+ * Contact: + *
    + *
  • + * + * + * [ clear + * | X ] + *
    • + *
  • [ add ]
    • + *
+ *
+ * + * + * function SettingsController1() { + * this.name = "John Smith"; + * this.contacts = [ + * {type: 'phone', value: '408 555 1212'}, + * {type: 'email', value: 'john.smith@example.org'} ]; + * } + * + * SettingsController1.prototype.greet = function() { + * alert(this.name); + * }; + * + * SettingsController1.prototype.addContact = function() { + * this.contacts.push({type: 'email', value: 'yourname@example.org'}); + * }; + * + * SettingsController1.prototype.removeContact = function(contactToRemove) { + * var index = this.contacts.indexOf(contactToRemove); + * this.contacts.splice(index, 1); + * }; + * + * SettingsController1.prototype.clearContact = function(contact) { + * contact.type = 'phone'; + * contact.value = ''; + * }; + * + * + * it('should check controller as', function() { + * var container = element(by.id('ctrl-as-exmpl')); + * expect(container.findElement(by.model('settings.name')) + * .getAttribute('value')).toBe('John Smith'); + * + * var firstRepeat = + * container.findElement(by.repeater('contact in settings.contacts').row(0)); + * var secondRepeat = + * container.findElement(by.repeater('contact in settings.contacts').row(1)); + * + * expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value')) + * .toBe('408 555 1212'); + * + * expect(secondRepeat.findElement(by.model('contact.value')).getAttribute('value')) + * .toBe('john.smith@example.org'); + * + * firstRepeat.findElement(by.linkText('clear')).click(); + * + * expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value')) + * .toBe(''); + * + * container.findElement(by.linkText('add')).click(); + * + * expect(container.findElement(by.repeater('contact in settings.contacts').row(2)) + * .findElement(by.model('contact.value')) + * .getAttribute('value')) + * .toBe('yourname@example.org'); + * }); + * + * + * + * This example demonstrates the "attach to `$scope`" style of controller. + * + * + * + *
+ * Name: + * [ greet ]
+ * Contact: + *
    + *
  • + * + * + * [ clear + * | X ] + *
    • + *
  • [ add ]
    • + *
+ *
+ * + * + * function SettingsController2($scope) { + * $scope.name = "John Smith"; + * $scope.contacts = [ + * {type:'phone', value:'408 555 1212'}, + * {type:'email', value:'john.smith@example.org'} ]; + * + * $scope.greet = function() { + * alert($scope.name); + * }; + * + * $scope.addContact = function() { + * $scope.contacts.push({type:'email', value:'yourname@example.org'}); + * }; + * + * $scope.removeContact = function(contactToRemove) { + * var index = $scope.contacts.indexOf(contactToRemove); + * $scope.contacts.splice(index, 1); + * }; + * + * $scope.clearContact = function(contact) { + * contact.type = 'phone'; + * contact.value = ''; + * }; + * } + * + * + * it('should check controller', function() { + * var container = element(by.id('ctrl-exmpl')); + * + * expect(container.findElement(by.model('name')) + * .getAttribute('value')).toBe('John Smith'); + * + * var firstRepeat = + * container.findElement(by.repeater('contact in contacts').row(0)); + * var secondRepeat = + * container.findElement(by.repeater('contact in contacts').row(1)); + * + * expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value')) + * .toBe('408 555 1212'); + * expect(secondRepeat.findElement(by.model('contact.value')).getAttribute('value')) + * .toBe('john.smith@example.org'); + * + * firstRepeat.findElement(by.linkText('clear')).click(); + * + * expect(firstRepeat.findElement(by.model('contact.value')).getAttribute('value')) + * .toBe(''); + * + * container.findElement(by.linkText('add')).click(); + * + * expect(container.findElement(by.repeater('contact in contacts').row(2)) + * .findElement(by.model('contact.value')) + * .getAttribute('value')) + * .toBe('yourname@example.org'); + * }); + * + * */ var ngControllerDirective = [function() {