Exploring Angular 1.3:binding to Directive Controllers

Original: http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html

Angular1.2 introduced the new syntax Controlleras, which makes the scope clearer and cleaner, making the controller smarter. Using Controlleras in our angular applications avoids some of the problems developers often encounter.

controllerAsMake a Namespace

Let's say things in code, there are two controllers as follows:

function Controllerone ($scope) {  $scope. foo = ' Pascal ';} function Controllertwo ($scope) {  $scope. foo = ' Christoph ';} App.controller (' Controllerone ', controllerone); App.controller (' Controllertwo ', controllertwo);

The HTML is as follows:

<div ng-controller= "Controllerone" >  {{foo}}  <div ng-controller= "Controllertwo" >    {{foo}}  </div></div>

In Controllertwo {{foo}}会覆盖ControllerOne中的 {{foo}} , the first {{Foo}} will display ' Pascal ', and the second {{foo}} displays ' Christoph '.

If we want to show ' Pascal ' in Controllertow, you can refer to the parent scope using the $parent property of scope:

<div ng-controller= "Controllerone" >  {{foo}}  <div ng-controller= "Controllertwo" >    {$ Parent.foo}}  </div></div>

However, using $parent is not a good solution, because if you nest a lot of our code is not conducive to maintenance. Imagine if you have 4 or 5 layers of nesting. Your code will become$parent.$parent.$parent.$parent, 这是不是很糟糕?

First we use this instead of $scope:

function Controllerone () {  This.foo = ' Pascal ';} function Controllertwo () {  This.foo = ' Christoph ';}

Next, we modify the Ngcontroller directive, using the Controlleras syntax:

<div ng-controller= "Controllerone as CTRL1" >  {{ctrl1.foo}}  <div ng-controller= "Controllertwo as Ctrl2 ">    {ctrl2.foo}}  </div></div>

When using a controller, we can use Controlleras. For example, in angular $routeprovider we can also use Controlleras.

$routeProvider. When ('/', {  templateurl: ' statetemplate.html ',  controlleras: ' Ctrl ',  controller: ' Statecontroller '});

Instructions can also have controllers, so we can also use Controlleras when defining instructions.

App.controller (' Somecontroller ', function () {  This.foo = ' bar ';}); App.directive (' somedirective ', function () {  return {    restrict: ' A ',    controller: ' Somecontroller ',    controlleras: ' Ctrl ',    Template: ' {{ctrl.foo}} '  };

Questions about using Controlleras in directives

We have said that when using Controlleras, the controller's scope is bound to the controller's this object, which means that this represents our scope. So how does it work when the directive has its own isolated scope?

The following directives have an isolated scope, a controller, and a template that uses the Controller property:

App.directive (' somedirective ', function () {  return {    scope: {},    controller:function () {      this.name = ' Pascal '    },    controlleras: ' Ctrl ',    Template: ' <div>{{ctrl.name}}</div> '  ;});

What if this name is to be bound in two directions?

App.directive (' somedirective ', function () {  return {    scope: {      name: ' = '    },    //...  };});

If we modify the properties of the isolation scope externally, he will not react to the controller's this object. In AngularJS1.2, we use the $scope service to re-assign our scope when the property changes. Don't forget to bind the $watch callback to the controller's this:

App.directive (' somedirective ', function () {  return {    scope: {      name: ' = '    },    controller:function ( $scope) {      this.name = ' Pascal ';      $scope. $watch (' name ', function (newvalue) {        this.name = newvalue;      }. Bind (this));    },    //...  };

Wait, the $scope that began to be removed is now back. And now we're writing a lot more code for two-way binding.

Fortunately, these have been well solved in ANGULARJS 1.3!

Binding a controller with Bindtocontroller

Angular 1.3 introduces a new attribute Bindtocontroller in the directive. When setting Bindtocontroller to true, the property is bound to a controller instead of scope.

This means that when the controller is instantiated, the initial value of the isolation scope is bound to this, and future changes to these property values are automatically reflected.

App.directive (' somedirective ', function () {  return {    scope: {      name: ' = '    },    controller:function ( {      this.name = ' Pascal ';    },    controlleras: ' Ctrl ',    Bindtocontroller:true,    Template: ' <div >{{ctrl.name}}</div> '  };});

Look, there's no need for $scope now.

Improvement in the 1.4

在1.4中, bindToController更加强大 . In 1.4, we can move all attributes that are bound to the isolation scope to Bindtocontroller.

In the following example. The scope property is no longer defined in scope:

App.directive (' somedirective ', function () {  return {    scope: {},    Bindtocontroller: {      someobject: ' = ',      somestring: ' @ ',      someexpr: ' & '    }    controller:function () {      this.name = ' Pascal ';    } ,    controlleras: ' Ctrl ',    Template: ' <div>{{ctrl.name}}</div> '  };});

Exploring Angular 1.3:binding to Directive Controllers