如何使Angular指令等待隔离范围数据可用？

Question

我有一个控制器,可以从我的API加载数据.不幸的是,我有一个场景,我不能使用解决方案来加载数据.

angular.module('myApp').controller('myController', function() {
    var myController = this;

    formService.find('123').then(function(response) {
        myController.formData = response.data;
    });
});

我的控制器模板然后使用一个使用此数据的指令:

<form-component form-data="myController.formData"></form-component>

指令:

angular.module('myApp').directive('formComponent', function() {
    'use strict';

    return {
        restrict: 'E',
        scope: {
            formData: '=',
        },
        templateUrl: 'formComponent.html',
        link: function($scope, element, attrs) {
            // Outputs "undefined" as this is not yet loaded when
            // this directive runs.
            console.log($scope.formData);
        }
    };
});

如您所见,当指令运行时,API尚未返回数据,因此访问时未定义$ scope.formData.

是否有一种方法可以优雅地使我的指令只在数据可用时才开始对数据起作用？我可以想到几个解决方案,但我对任何一个都不满意:

1. 广播指示数据已加载的事件.
2. 在指令中放置$ watch,然后在监视回调运行时取消绑定监视.

Answer 1

在数据加载并使用 ng-if 之前保留formDatafalsey ( null/undefined有效)。该指令只会在 ng-if 为真时编译。

<form-component ng-if="myController.formData" form-data="myController.formData"></form-component>