javascript - AngularJS指令: how to compile html after promise

Question

我有一个指令调用另一个指令，将一些值作为对象传递。我的问题是模板在获取数据的 promise 得到满足之前就被编译了。

指令:

var directives = angular.module('app.directives', []);
    directives.directive('mydirective', function (myService, $http, $compile) {
        var templateUrl = "/some/file.html";
        return {
            restrict: "AE",
            scope: {
                entry: "="
            },
            link: function (scope, element, attrs) {
                var entry = scope.entry;
                var template = {
                    //** some empty key - value pairs **//
                };


                $http.get(templateUrl).then(function (response) {
                    element.html(response);

                    myService(entry.id, function (err, res) {
                        if (err)
                            throw err;

                       //** code to fill the template object **//

                        scope.seqplot = template;
                        $compile(element.contents())(scope);
                    });
                });
            }
        };
    });

模板(可以访问 seqplot 指令 here ):

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            Some header
        </h3>
    </div>
    <div class="panel-body">
        <div class="row" ng-repeat="x in seqplot.k2 track by $index">
            {{$index}}
            <div class="col-md-4">
                {{seqplot.k1[$index]}}
            </div>
            <div class="col-md-8">
                <seqplot data-bar-width="666" 
                         data-region-data="seqplot.k3" 
                         data-regions='seqplot.k2[$index]' 
                         data-seq="{{seqplot.k4}}" 
                         data-gradient="true"></seqplot>
            </div>
        </div>
    </div>
</div>

我调用指令的部分:

<div>   
    <h1 class="page-header">{{entry.name| uppercase}} <small> - {{entry.uniprot_id| uppercase}}</small> </h1>
    <div mydirective data-entry="entry"></div>
</div>

Controller :

var ctrlEntry = controllers.controller('ctrlEntry', function ($scope, $location, $rootScope) {

    var getEntry = function (obj_arr, id) {
        for (var i = 0; i < obj_arr.length; i++) {
            var curr = obj_arr[i];
            if (curr.id === id) {
                return curr;
            }
        }
    };

    var data = $rootScope.data;

    var path = $location.path().split('/');
    var entry_id = path[path.length - 1];
    $scope.entry = getEntry(data, entry_id);
});

问题是 mydirective 的scope.seqplot 对象在 myService 回调执行之前被传递给 seqplot 指令。因此，我怀疑我需要某种方法在服务回调执行后立即重新编译 html 模板，或者使指令等待编译模板，直到服务回调完全执行。有想法吗？非常感谢。

Answer 1

初始化逻辑不属于指令链接函数。最好的情况是使用路由器(ngRoute/ui-router)，它为您提供 resolve 属性，其中所有内容在进入 UI 之前都已初始化，因此所有数据在编译指令之前已准备就绪。