AngularJS Controller as syntax and Directives

Question

So I have been exploring the Controller as syntax in AngularJS, and I want to know how to deal with directives and $scope, specifically inheritance of the controllers $scope or properties from a child directive.

I am using Typescript, so given this controller:

export class DefaultController implements IDefaultController {
    customer: Models.ICustomer;

    static $inject = ['$scope', 'config', 'customerDataService'];

    constructor(private $scope: ng.IScope, private config: ApplicationConfig, private customerDataService: Services.ICustomerDataService) {

    }

    getCustomerById(id: number): void {
        console.log(this.config.version);
        this.customerDataService.getCustomer(id).then((customer) => {
            this.customer = angular.extend(new Models.Customer(), customer);

        });
    }
}

How would I go about passing the customer down to a directive which would typically inherit the $scope of the parent controller.

Radim Köhler · Accepted Answer · 2014-10-02 05:12:27Z

In case we would declare as like this (inside of a View):

<div ng-controller="DefaultController as Events">
 ...

Almost the same for Directive def:

export class MyDefaultDirective implements ng.IDirective
{
    public restrict: string = "E";
    public replace: boolean = true;
    ...
    public controller: string = "DefaultController as Events";
    ...

We can expect, that the instance of this controller will be injected into $scope like this:

// this was done by angular
// - the 'as' part was used for a property name
// - current controller instance was injected 
var controller = this.$scope.Events;

So we can now access any public stuff of our controller. A bit simplified (but exact) version of the above controller snippet:

export class DefaultController implements IDefaultController {
    // explicit public just to show that this will be available
    public customer: Models.ICustomer;
    ....

    getCustomerById(id: number): void {
        this.customerDataService.getCustomer(id).then((customer) => {

            // HERE
            // this.$scope.Events.customer is ready for use
            this.customer = angular.extend(new Models.Customer(), customer);
      ...

In our View (once loaded via $http) we can consume above result like this:

<div>
  {{Events.customer}} // public propeties of this.$scope

Collectives™ on Stack Overflow

AngularJS Controller as syntax and Directives

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related