What steps are necessary to enable two-way binding in Angular using the latest controllerAs syntax and Object-Oriented Controllers?

Question

What steps are necessary to enable two-way binding in Angular using the latest controllerAs syntax and Object-Oriented Controllers?

Concerned about "scope soup" where too much functionality is added to the $scope, I am currently exploring Object-Oriented controllers, the new controllerAs syntax, and using EC5 style getter/setters in my controller. While this approach is effective, I am struggling to establish a two-way binding between my directive's scope and my controller's scope. I have created a codePen demo to illustrate the issue.

http://codepen.io/anon/pen/DlfxB?editors=101

I am anticipating the following code line to function as intended:

scope: { pants: '='},

javascript angularjs ecmascript-5

Answer 1

Answer №1

If you are using version 1.3 rc of AngularJS, you have the option to utilize the bindToController option. This allows for the two-way bound scope variables to be directly linked to the controller. If not using this option, you would need to manually map the properties to the controller instance, which can be cumbersome. Alternatively, you can use the regular syntax without the controller for two-way binding properties. For example, you can do

'<h1>{{my.pants}} - myDirective.pants = {{ my.pants }}</h1><input ng-model="my.pants">'

with bindToController:true in the directive configuration.

bindToController

When an isolate scope is used for a component (see above) and controllerAs is used, bindToController will

allow a component's properties to be bound directly to the controller rather than the scope. Upon instantiation of the controller, the initial values of the isolate scope bindings are readily available.

(function(){
    
   var myApp = angular.module('plunker', []);

    var helloEC5 = function(){
      this.pants = "jeans";
    };
    helloEC5.prototype = {
        firstName: 'Seeya',
        lastName: 'Latir',
        get fullName() {
            return this.firstName + ' ' + this.lastName;
        },
        set fullName (name) {
            var words = name.toString().split(' ');
            this.firstName = words[0] || '';
            this.lastName = words[1] || '';
        }
    };
    myApp.controller('HelloEC5', helloEC5);
    myApp.directive('myDirective', function () {
        return {
          scope: { pants: '='},
          controllerAs: 'my',
          controller: function(){},
          bindToController:true,
          template: '<h1>{{my.pants}} - myDirective.pants = {{ my.pants }}</h1><input ng-model="my.pants">'
        }
    });
 })();

   <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dece3eaf8e1ecffa3e7fecdbca3bea3bda0ffeea3bc">[email protected]</a>" data-semver="1.3.0-rc.1" src="https://code.angularjs.org/1.3.0-rc.1/angular.js"></script>

  <div ng-app="plunker">
    <div ng-controller="HelloEC5 as EC5">
      <p>HelloEC5 says my name is: {{EC5.fullName}} wearing {{EC5.pants}}!</p>
      <label>Pants:</label>
      <input ng-model="EC5.pants" type="text" />
      <label>FirstName:</label>
      <input ng-model="EC5.firstName" type="text" />
      <div my-directive="" pants="EC5.pants"></div>
      <hr />
      <label>Setting HelloEC5.fullName:</label>
      <input ng-model="EC5.fullName" />
    </div>
  </div>

Answer 2

If you are using version 1.3 rc of AngularJS, you have the option to utilize the bindToController option. This allows for the two-way bound scope variables to be directly linked to the controller. If not using this option, you would need to manually map the properties to the controller instance, which can be cumbersome. Alternatively, you can use the regular syntax without the controller for two-way binding properties. For example, you can do

'<h1>{{my.pants}} - myDirective.pants = {{ my.pants }}</h1><input ng-model="my.pants">'

with bindToController:true in the directive configuration.

bindToController

When an isolate scope is used for a component (see above) and controllerAs is used, bindToController will

allow a component's properties to be bound directly to the controller rather than the scope. Upon instantiation of the controller, the initial values of the isolate scope bindings are readily available.

(function(){
    
   var myApp = angular.module('plunker', []);

    var helloEC5 = function(){
      this.pants = "jeans";
    };
    helloEC5.prototype = {
        firstName: 'Seeya',
        lastName: 'Latir',
        get fullName() {
            return this.firstName + ' ' + this.lastName;
        },
        set fullName (name) {
            var words = name.toString().split(' ');
            this.firstName = words[0] || '';
            this.lastName = words[1] || '';
        }
    };
    myApp.controller('HelloEC5', helloEC5);
    myApp.directive('myDirective', function () {
        return {
          scope: { pants: '='},
          controllerAs: 'my',
          controller: function(){},
          bindToController:true,
          template: '<h1>{{my.pants}} - myDirective.pants = {{ my.pants }}</h1><input ng-model="my.pants">'
        }
    });
 })();

   <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dece3eaf8e1ecffa3e7fecdbca3bea3bda0ffeea3bc">[email protected]</a>" data-semver="1.3.0-rc.1" src="https://code.angularjs.org/1.3.0-rc.1/angular.js"></script>

  <div ng-app="plunker">
    <div ng-controller="HelloEC5 as EC5">
      <p>HelloEC5 says my name is: {{EC5.fullName}} wearing {{EC5.pants}}!</p>
      <label>Pants:</label>
      <input ng-model="EC5.pants" type="text" />
      <label>FirstName:</label>
      <input ng-model="EC5.firstName" type="text" />
      <div my-directive="" pants="EC5.pants"></div>
      <hr />
      <label>Setting HelloEC5.fullName:</label>
      <input ng-model="EC5.fullName" />
    </div>
  </div>

What steps are necessary to enable two-way binding in Angular using the latest controllerAs syntax and Object-Oriented Controllers?

Answer №1

Similar questions

Incorporate a `fresh Audio` element into my redux repository

Enhancing the efficiency of a Puppeteer web scraping operation

Automatically redirect to a different page upon clicking the jquery popup button

Implement a click event using jQuery specifically for Internet Explorer version 7

What could be causing my dropdown links to malfunction on the desktop version?

Updating a field in Mongoose by referencing an item from another field that is an array

Having trouble retrieving a value within the jQuery.ajax success function

Troubleshooting Issues with jQuery Accordion Buttons

Verify the dialog box return with a text input box

"Transforming JSON data into a format compatible with Highcharts in PHP: A step-by-step

What is the solution to incorporating a scrollbar in a popup when I increase the zoom level?

Utilizing URL encoding instead of JSON when using Postman

Transform the year into the Buddhist calendar system

Select2 using AJAX: chosen option disappears upon receiving AJAX response

What is the most effective method for displaying two external web pages next to each other?

A guide on converting character objects to strings

Refreshing the entire page upon modifying a single state

Is there a way to extract the query string from a file in order to query the database using ExpressJS?

How can one determine the completion of a chunked download request in Angular's HTTP client?

What could be causing the header of the datatable to be out of alignment with the rest of