AngularJS指令：承诺后如何编译html答案

【问题标题】：AngularJS Directives: how to compile html after promiseAngularJS指令：承诺后如何编译html
【发布时间】：2015-08-07 21:04:28
【问题描述】：

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

指令：

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>

还有控制器：

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 模板，或者让指令等待编译模板，直到服务回调完全执行。想法？非常感谢。

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

初始化逻辑不属于指令链接功能。最好的情况是使用路由器（ngRoute / ui-router），它为您提供resolve 属性，在进入 UI 之前一切都已初始化，因此在编译指令之前所有数据都已准备好。

【讨论】：