Question

Angular 1.6

我无法理解为什么我无法访问组件控制器中的绑定self.widget对象。 console.log(self.widget);打印undefined。但我可以通过widget访问模板中的$ctrl.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 -->

Answer 1

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

根据the reference，

在实例化控制器之后，隔离范围绑定的初始值将绑定到控制器属性。一旦初始化了这些绑定，你可以通过提供一个名为$ onInit的控制器方法来访问这些绑定，该方法是在构造了元素上的所有控制器并初始化它们的绑定之后调用的。

此行为由$compileProvider.preAssignBindingsEnabled控制：

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

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

Angular 1.5.x中的默认值为true，但将切换为false   Angular 1.6.x。

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

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

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

1 个答案: