Être objet binded à l'intérieur contrôleur de composants

Question

angulaire 1,6

Je ne comprends pas pourquoi je n'ai pas accès à l'binded self.widget objet dans mon contrôleur composant. Le console.log(self.widget); imprime undefined. Mais j'ai accès à l'objet widget dans le modèle via $ctrl.widget, le widget fonctionne.

Et je vois l'objet dans la console du navigateur lorsque je angular.element($0).scope().$ctrl

Composant:

import template from './templates/clock-widget.template.html'; 
import controller from './clock-widget.controller'; 

const clockWidget = { 
    bindings: { 
     widget: '<' 
    }, 
    controller, 
    template 
}; 

export default clockWidget; 

contrôleur du composant:

import controller from './clock-widget.settings.controller.js'; 
import template from './templates/clock-widget.settings.template.html'; 

import 'angular-clock/dist/angular-clock.css'; 
import './style.css'; 

import timezones from './timezones'; 

const injectParams = ['$scope', '$timeout', '$uibModal']; 
const ClockWidgetCtrl = function($scope, $timeout, $uibModal) { 
    const self = this; 

    self.gmtOffset = 2; 
    console.log(self.widget); 

    self.openSettings = function() { 
     $uibModal.open({ 
      scope: $scope, 
      controllerAs: '$ctrl', 
      controller, 
      template, 
      resolve: { 
       widget: function() { 
        return self.widget; 
       } 
      } 
     }); 
    }; 
}; 

ClockWidgetCtrl.$inject = injectParams; 
export default ClockWidgetCtrl; 

modèle de composant:

<div class="box clock-widget"> 
    <div class="box-header"> 
     <h3>{{ $ctrl.widget.title }}</h3> 
     <div class="box-header-btns pull-right"> 
      <a title="settings" ng-click="$ctrl.openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a> 
      <a title="Remove widget" ng-click="$ctrl.remove(widget)"><i class="glyphicon glyphicon-trash"></i></a> 
     </div> 
    </div> <!-- END box-header --> 

    <div class="box-content"> 
     <b>{{$ctrl.widget.config.location.split('/')[1]}}</b> 
     <ds-widget-clock gmt-offset="$ctrl.gmtOffset" show-analog show-gmt-info></ds-widget-clock> 
    </div> <!-- END box-content --> 
</div> <!-- END box --> 

Answer 1

Le modèle de directive/composant n'a pas encore été compilé au moment de la construction d'un automate et les liaisons ne sont pas non plus affectées à l'instance de contrôleur.

Selon the reference,

Après que le contrôleur est instancié, les valeurs initiales des liaisons de portée isolés seront liés aux propriétés du contrôleur. Vous pouvez accéder à ces liaisons une fois qu'elles ont été initialisées en fournissant une méthode de contrôleur appelée $ onInit, qui est appelée après que tous les contrôleurs d'un élément ont été construits et que leurs liaisons ont été initialisées.

Ce comportement est contrôlé par $compileProvider.preAssignBindingsEnabled:

Appelez cette méthode pour activer/désactiver si les contrôleurs de directive sont liaisons affectées avant d'appeler le constructeur du contrôleur. Si est activé (true), le compilateur attribue la valeur de chacune des liaisons aux propriétés de l'objet contrôleur avant que le constructeur de ne soit appelé.

Si désactivé (faux), le compilateur appelle le constructeur avant en affectant des liaisons.

La valeur par défaut est true dans Angular 1.5.x mais passera à false dans Angular 1.6.x.

Toute la logique qui est liée aux consolidations et aux DOM doit être placé à l'intérieur $onInit ou $postLink crochet (nouvelles alternatives à la directive fonctions pré/post-link):

self.$onInit = function() { 
    console.log(self.widget); 
}