来自$ http的角度组件一次性绑定显示未定义 [英] angular component one-time binding from $http shows undefined

问题描述

我是Angular的新手.我正在尝试使用组件(1.6).在父级中，我有一个$http.get，它从服务获取数据，然后将响应分配给$scope变量.该作用域变量使用单向绑定<传递给子组件.在JavaScript中，如果我警告传入的变量，则会得到未定义"，但是，子级中的html模板会显示该变量.就像发生了争用情况一样，我不知道如何告诉它等到从服务中加载数据.

I'm new to Angular. I'm trying to use components (1.6). In the parent, I have an $http.get that gets data from a service and then assigns the response to a $scope variable. That scope variable is passed to a child component using one-way binding <. In the JavaScript, if I alert the variable passed in, I get "undefined", however, the html template in the child does show the variable. It's like there is a race condition happening and I don't know how to tell it to wait until the data from the service is loaded.

在我的parent.js中:

In my 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模板中:

In my parent HTML template:

<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模板中:

In my child html template:

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

在html中，{{$ctrl.baseline}}可以正常显示，但是当我在.js中发出警报时，它是undefined.这是为什么?如何确保{{$ctrl.baseline}}在javascript加载之前已在范围内?

In the html, {{$ctrl.baseline}} is displayed fine, but when I alert it in the .js, it's undefined. Why is that? How can I make sure the {{$ctrl.baseline}} is in scope before the javascript loads?

推荐答案

使用$onChanges生命周期挂钩:

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);
        };
    };
}

控制器需要等待数据来自服务器.通过使用$ onChanges生命周期挂钩，当数据可用时将调用drawChart函数，并将在后续更新中调用该函数.

The controller needs to wait for the data to come from the server. By using the $onChanges life-cycle hook, the drawChart function will be called when the data becomes available and will be called on subsequent updates.

有关更多信息，请参见 AngularJS综合指令API参考-生命周期挂钩.

For more information, see AngularJS Comprehensive Directive API Reference - Life-Cycle Hooks.

这篇关于来自$ http的角度组件一次性绑定显示未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！