Angular components, controller not loading

Question

I have the following angular:

angular.module("app.components", []);
angular.module("app", [
    "app.components"
]);

angular.module("app.components")
    .component('testWidget', {
        templateUrl: '/Widgets/TestWidget/Templates/TestWidget.template.html',
        bindings: {
            something: "="
        },
        controller: function () {
            var ctrl = this;
            // ctrl has nothing on it
        }
    });

<div ng-app="app">
    <test-widget something="Shoopy"></test-widget>
</div>

but the something is not part of the object (this) in the controller. what have i missed?

what is the error you are getting?

Naman Kheterpal
– Naman Kheterpal

2018-04-29 19:30:03 +00:00
Commented Apr 29, 2018 at 19:30 — Naman Kheterpal
– Naman Kheterpal, Commented Apr 29, 2018 at 19:30
No error, it's just that ctrl.something does not exist?

Jimmyt1988
– Jimmyt1988

2018-04-29 23:26:36 +00:00
Commented Apr 29, 2018 at 23:26 — Jimmyt1988
– Jimmyt1988, Commented Apr 29, 2018 at 23:26

Matthew · Accepted Answer · 2018-04-30 11:34:20Z

1

two-way binding (expects a parent scope property to watch for value changes):

bindings: {
    something: "="
}

A parent controller would need to set the property:

$scope.Shoopy = "hello world"

For parameter bindings use the following:

string value binding:

bindings: {
    something: "@"
}

answered Apr 30, 2018 at 11:34

Matthew

5004 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Velasquez · Accepted Answer · 2018-04-30 01:09:40Z

0

you forgot controllerAs since you're using this instead of $scope

try this

angular.module("app.components")
    .component('testWidget', {
        templateUrl: '/Widgets/TestWidget/Templates/TestWidget.template.html',
        bindings: {
            something: "="
        },
        controllerAs: "ctrl",
        controller: function () {
            var ctrl = this;
            // ctrl has nothing on it
        }
    });

answered Apr 30, 2018 at 1:09

John Velasquez

3,4512 gold badges21 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angular components, controller not loading

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related