Question

我在项目中使用angular 1.5组件。在我的组件中，我始终未定义对象数据。

我希望在调用product-result组件之前不会初始化$ ctrl.products。如何在初始化后调用product-result组件 $ ctrl.products对象。

products.list.component.html

<div class="container">
    <div class="col-md-6" >
        <span>{{$ctrl.products}}</span>
        <product-result data="$ctrl.results" max="6"></product-result>
    </div>

</div>

Answer 1

实现这一目标的一种方法是加入角度的新组件方法，即$onChanges和$onInit。

如果products.list.component.js对产品对象发出API调用，然后呈现新的$ctrl.results数据集。

您可以让product-result.js组件使用新的$ctrl.results方法检查$onChanges的单向绑定。无论何时更新单向绑定，都会调用$onChanges。该方法接受change对象参数。 changes对象具有键，这些键是已更改的绑定属性的名称。

product-result.js的代码可能是

/**
 * @ngdoc function
 * @name $onInit
 * @description on bootstrap for the component check if the value `ctrl.results ` is falsy    
*/
$onInit: function $onInit () {
    if (!this.results) {
        this.showNoDataAvaliable = true;
    }
},

/**
 * @ngdoc function
 * @name $onChanges
 * @description when component product-list passes a new value for $ctrl.results,  Show the data.
 * @param {Object} changes the changes object when any binding property is updated, this is similar to
 * having a watch function on $scope.variable   
 */
$onChanges: function $onChanges (changes) {
    if (changes.data && changes.data.currentValue) {
        this.showNoDataAvaliable = false;
        //... more code on how to display the data.
    }
}

Todd Motto有一篇关于angular 1.5组件的博文，我建议你阅读 https://toddmotto.com/angular-1-5-lifecycle-hooks

Answer 2

更简单的解决方案就是使用ng-if延迟内部组件的渲染，直到加载结果：

<product-result ng-if="$ctrl.results" data="$ctrl.results" max="6"></product-result>

这将允许您将HTML保留在模板所在的位置，但会阻止将内部组件添加到DOM并初始化，直到$ctrl.results被定义。

Answer 3

如果你想在初始化$ ctrl.products之后初始化组件，那么你可以使用angular提供的$ compile服务。

在$ ctrl.products初始化的行之后使用以下行：

var domObj = $compile('<my-directive></my-directive>')($scope);
$('selector where you want to append this directive').append(domObj);

角度组件绑定对象未初始化

3 个答案: