获取组件控制器内的绑定对象答案

【问题标题】：Get binded object inside component controller获取组件控制器内的绑定对象
【发布时间】：2018-03-05 09:09:19
【问题描述】：

Angular 1.6

我不明白为什么我无法访问组件控制器中绑定的self.widget 对象。 console.log(self.widget); 打印 undefined。但是我可以通过$ctrl.widget 访问模板中的widget 对象，该小部件可以工作。

当我执行angular.element($0).scope().$ctrl 时，我会在浏览器控制台中看到该对象

组件：

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

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

export default clockWidget;

组件的控制器：

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;

组件模板：

<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 -->

【问题讨论】：

标签： angularjs angular-components

【解决方案1】：

在构造控制器时，指令/组件模板尚未编译，并且绑定也未分配给控制器实例。

根据the reference，

控制器实例化后，隔离作用域绑定的初始值将绑定到控制器属性。您可以通过提供一个名为 $onInit 的控制器方法在初始化这些绑定后访问它们，该方法在元素上的所有控制器都已构建并初始化其绑定后调用。

此行为由$compileProvider.preAssignBindingsEnabled控制：

调用此方法来启用/禁用指令控制器是否在调用控制器的构造函数之前分配绑定。如果启用（true），编译器分配每个绑定的值到构造函数之前的控制器对象的属性这个对象被调用了。

如果禁用（false），编译器在调用之前先调用构造函数分配绑定。

Angular 1.5.x 中默认值为 true，但在 Angular 1.5.x 中会切换为 false Angular 1.6.x.

所有与绑定和 DOM 相关的逻辑都应放在 $onInit 或 $postLink 挂钩中（指令前/后链接函数的新替代方案）：

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

【讨论】：