添加新指令时角$compile不工作

Question

    (function(){

        angular
            .module('main')
            .directive('search', search);

        search.$inject = ['$compile'];

        function search($compile){

            return {
                link: function(scope, ele, attrs){
                    ele.bind('click', function(){
                        var template = "<search-results>{{searchCtrl.results.length}}</search-results>";
                        $compile(template)(scope);
                        $('.resultsContainer').append(template);
                    });
                }
            }

        }

    })();

<search-results></search-results>是另一个指令，如下所示：

(function(){

    angular
        .module('main')
        .directive('searchResults', searchResults);

    searchResults.$inject = [];

    function searchResults(){

        return {
            templateUrl: 'main/views/resultsContainer.client.view.html',
            link: function(scope, ele, attrs){
                ele.bind('click', function(){

                });
            }
        }

    }

})();

我试图在开头()添加的指令没有被编译，我得到了以下内容

<search-results>{{searchCtrl.results.length}}</search-results>

作为输出。范围值不会注入到其中。但是，新的指令本身也有另一个模板要删除，这是完成的。我在控制台中看到了对模板的请求。

有人能发现我的错误吗？

Answer 1

您需要附加$compile返回的结果

试着改变：

 $compile(template)(scope);

至

template = $compile(template)(scope);