处理 Angularjs 中未准备好的绑定

Question

我的组件正在传递一个对象作为绑定，

.component('selectionButton', {
    bindings: {
        parentForm : '<'
    },
    templateUrl: 'selection-button-component.html',
    controller: 'selectionButtonController',
    controllerAs: 'selBtnCtrl'
});

问题是我正在传递的对象在我的组件初始化时尚未加载，所以在 $onChanges 挂钩中我这样做了 :

vm.$onChanges = function(newObj){
    if(angular.isDefined(newObj.parentForm.currentValue)){
        vm.parentForm = newObj.parentForm.currentValue;
    }
};

在我的控制器中，我在一个函数中调用 vm.parentForm，当我在页面完全加载后单击按钮时触发该函数，但我总是将其设为 undefined，即使我使用 $onChanges.

更改了它的值

当我检查 vm.$onChanges 函数时，我可以看到 vm.parentForm 的值正在获取 changesObj.parentForm 中的新值。

我该如何解决这个问题？

编辑：

我尝试用 ng-if 包裹我的元素，如下所示：

<span ng-if="fullPage.posteForm">
            <selection-button parent-form="fullPage.posteForm" ></selection-button>
        </span>

但这没有用。我也尝试过双向绑定，但效果不佳。

Answer 1

当您将一个对象传递给一个组件时，它可能还没有准备好，因为您正在等待一个 promise 或另一个要解决的操作，但对象定义在那里是未定义的。对于那种场景，您可以使用 isFirstChange()。这是一个说明这种情况的工作示例 JSFiddle example。打开您的控制台以查看您的绑定在超时后何时更新。

注意：如果组件模板中使用的对象名称与传递给组件的对象名称相同，则您无需创建新对象，它将在您的组件中更新并在模板中可用。

处理 Angularjs 中未准备好的绑定

Dealing with not ready bindings in Angluarjs

angularjs

angularjs-components

编辑：