angularjs - 来自 $http 的 Angular 组件一次性绑定(bind)显示未定义

Question

我是 Angular 的新手。我正在尝试使用组件 (1.6)。在父级中，我有一个 $http.get从服务获取数据，然后将响应分配给 $scope多变的。使用单向绑定(bind)将该范围变量传递给子组件 < .在 JavaScript 中，如果我提醒传入的变量，我会得到“未定义”，但是，子项中的 html 模板会显示该变量。就像发生了竞争条件，我不知道如何告诉它等待服务数据加载完毕。

在我的 parent.js 中:

(function (angular) {
    'use strict';
    $http.get("http://localhost:52422/api/PayOffYourCc")
    .then(function mySucces(response) {
        $scope.baseline = response.data;

    }
    ,
    function myError(respone) {
        $scope.baseline = response.statusText;

    }
    );
})(window.angular);

在我的父 HTML 模板中:

<thermometer baseline="baseline"></thermometer>

在我的子组件中:

(function (angular) {
    'use strict';

    function drawChart(baselineVal) {
        alert(baselineVal);
    }

    function ThermometerController($scope) {
        var ctrl = this;
        ctrl.$onInit = function () {
            drawChart(ctrl.baseline);
        };


    }

    angular.module('payOffYourCcApp').component('thermometer', {
        templateUrl: '../PayOffYourCC/partials/thermometer.html',
        transclude: true,
        controller: ThermometerController,
        bindings: {
            baseline: '<'
        }
    });
})(window.angular);

在我的子 html 模板中:

<div>
    baseline:{{$ctrl.baseline}}
</div>

在 html 中，{{$ctrl.baseline}}显示正常，但当我在 .js 中提醒它时，它是 undefined .这是为什么？我怎样才能确保 {{$ctrl.baseline}}在加载 javascript 之前在范围内吗？

Answer 1

使用 $onChanges 生命周期钩子(Hook):

function ThermometerController($scope) {
    var ctrl = this;
    /* REPLACE THIS
    ctrl.$onInit = function () {
        drawChart(ctrl.baseline);
    }; */
    // WITH THIS
    ctrl.$onChanges = function (changesObj) {
        if (changesObj.baseline && changesObj.baseline.currentValue) {
            drawChart(changesObj.baseline.currentValue);
        };
    };
}

Controller 需要等待服务器传来数据。通过使用 $onChanges 生命周期 Hook ，drawChart 函数将在数据可用时调用，并将在后续更新时调用。

有关详细信息，请参阅 AngularJS Comprehensive Directive API Reference - Life-Cycle Hooks .