CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-bindings
Peter Morris
Peter Morris

Reputation: 23254

Angular directive is not detecting change in parent controller's properties

I have a HTML file that uses the "controller as" approach. It has a complex property type (an array of objects) which I want to present to the user via an Angular directive so that I can use it on other pages too. My directive also uses the "controller as" approach.

--- Snippet from HTML ---
<body ng-controller="documentViewerController as controller">
  Length {{ controller.documentReferenceStructure.length }}
  <document-reference document-reference-structure="controller.documentReferenceStructure"></document-reference>       

--- Snippet from my directive's template ---
<p>Hello {{ controller.documentReferenceStructure.length}}</p>

--- My directive ---
module myapp.directives {
    export class documentReferenceController {
        public documentReferenceStructure: IDocumentReferenceStructurePart[];

        constructor() {
            this.documentReferenceStructure = [];
        }

        public update() {
            this.documentReferenceStructure = [];
        }

        public static registerDirective(app: ng.IModule) {
            app.controller("documentReferenceController", documentReferenceController);
            app.directive("documentReference", function () {
                return {
                    restrict: "EA",
                    templateUrl: "/app/directives/documentReference/documentReference.html",
                    scope: {
                        documentReferenceStructure: "="
                    },
                    controller: "documentReferenceController",
                    controllerAs: "controller",
                    link: (scope, element, attributes, controller : documentReferenceController) => {
                    }
                };
            });

        }
    }
}

When the main controller's documentReferenceStructure property is updated, the web page shows the correct length of the array in the HTML after "Length", but the directive doesn't update and still says "Hello 0". If add a button to the directive so that I can inspect the value of its documentReferenceStructure property it seems it never gets updated.

Updating the page controller's documentReferenceStructure property is not propagating down into the directive, isn't that what the scope: { documentReferenceStructure : "=" } is supposed to do?

What am I missing? Something in the link() perhaps?

Upvotes: 0

Views: 514

Answers (1)

Peter Morris
Peter Morris

Reputation: 23254

The problem was that I was missing the following property in my directive registration

bindToController: true,

Example

            return {
                restrict: "EA",
                templateUrl: "/app/directives/documentReference/documentReference.html",
                scope: {
                    documentReferenceStructure: "="
                },
                controller: "documentReferenceController",
                controllerAs: "controller",
                bindToController: true
            }

Upvotes: 0

Related Questions