0

I'm trying to wrap my head around the change with AngularJS regarding the components' lifecycle hooks, especially $onInit(). I'm working with Todd Mottos Course, where he build a component which, in my opinion, should not work with 1.6, but it still does:

var repos = {
template: `
    <div class="repos">
        My Repos:
        <ul>
            <li ng-repeat="repo in $ctrl.list">
                <a href="{{ repo.html_url }}">
                    {{ repo.name }}
                </a>
                ({{ repo.stargazers_count }} stars)
            </li>
        </ul>
    </div>
`,
controller: function (ReposService) {
    var ctrl = this;
    ctrl.list = [];
    ReposService.getRepos().then(function (response) {
        console.log(ctrl.list);
        ctrl.list = response;
    });
}
};

angular
    .module('repos')
    .component('repos', repos)
    .config(function ($stateProvider) {
        $stateProvider
            .state('repos', {
                url: '/repos',
                component: 'repos'
        });
    });

I don't understand, why 

controller: function (ReposService) {
    var ctrl = this;
    ctrl.list = [];
    ReposService.getRepos().then(function (response) {
        ctrl.list = response;
    });
}

still works, I thought "ctrl.list" would have to be initialized inside an $onInit, otherwise it is still undefined?

Vortilion
  • 406
  • 2
  • 6
  • 24
  • 1
    It is not wise to do it that way. The binding `list: '<'` provides a one-way binding from the outside controller to the isolate scope. The directive controller should only read the `list` property. It should not assign values to it. – georgeawg Aug 10 '18 at 08:06
  • Forget the binding, this was an error on my side, it wasnt in the original code. – Vortilion Aug 10 '18 at 08:26

0 Answers0