Angular ng-repeat内部指令未呈现

时间:2016-04-14 10:45:59

标签: angularjs compilation nested ng-repeat

我以前曾问过这个问题,但我还不够具体。我在嵌套指令中有一些与ng-repeat有关的难题。我必须发布我的所有代码,以便您可以看到我正在做的事情,因为它比尝试解释更容易。

实质上,如果我使用绑定到控制器的属性,我的ng-repeat不会呈现内容。但是,如果我使用{{ctl.myarray}}将属性内容输出到屏幕,它就会读得很好,证明该属性是可访问的。

问题出现在一个指令中,该指令通过ajax动态加载内容并编译它。 ajax文件的内容包含带有指令的html,而THAT指令具有不起作用的ng-repeat。

这里是:

控制器(主要和第一个嵌套控制器)

<!-- main controller -->
<div ng-controller="ReportController as rc" ng-cloak="">

    <!-- controller for filters -->
    <div class="report-filters" ng-controller="FilterController as fc">

        <!-- directive that loads bootstrap popovers from a template -->
        <rep-popover parent="fc" title="Add Filter" template="html/popovers/add_filter.html">
            <a href="" class="btn btn-default btn-add">Add Filter</a>
        </rep-popover>    

    </div>

    <!-- ../ rest of the page below ... -->

</div>

popover.directive.js (popover generator指令)

(function () {
    'use strict';

    angular.module(ng_module_name)
        .directive('repPopover', popover);

    popover.$inject = ['$http', '$compile'];

    function popover($http, $compile) {
        var directive = {
            controller: controller,
            controllerAs: 'pop',
            link: link,
            replace: true,
            restrict: 'E',
            scope: { // properties bound in html
                parent: '=',
                title: '@',
                template: '@',
                placement: '@',
                container: '@'
            }
        };

        return directive;
        //////////////////


        /** directive controller */
        function controller($scope) {
            var ctl = this;

            ctl.parent = $scope.parent;
            ctl.title = $scope.title;
            ctl.template = $scope.template;
            ctl.placement = $scope.placement;

            ctl.close = close;
            //////////////////


            /** close the popover */
            function close() {
                var popover = $scope.element.children(":last-child");
                popover.popover("hide");
            }

        }

        /** DOM manipulation function */
        function link(scope, element) {

            scope.element = element;

            if (!scope.template) {
                alert("Error: popover requested, but no template provided!");
                return;
            }

            // request template, and populate popover
            $http.get(reports_data.root+'/'+scope.template).then(function (content) {
                if (content && content.status == 200) {

                    var activator = element.children(":first-child");
                    var placement = scope.placement || "bottom";
                    var compiled_content = $compile(content.data)(scope);

                    // bootstrap popover
                    activator.popover({
                        title: scope.title,
                        content: compiled_content,
                        placement: placement,
                        html: true,
                        container: scope.container || false
                    });
                }
            });
        }
    }
}());

add_filter.html (弹出模板)

<!--- add filter -->

<div class="add-filter-popover">
    <form>
        <select rep-filter-select="" columns="parent.tracker.available" class="form-control filter-select">
            <!-- THIS IS WHERE THE REPEAT BREAKS -->
            <option ng-repeat="i in select.list">{{ i }}</option>
        </select>

        <!-- show before column is chosen -->
        <div class="empty-spacing"></div>

        <!-- ../ rest of template... -->
    </form>

</div> <!--- ./add-filter-popover -->

filter.directive.js (popover模板中的嵌套指令)

(function () {
    'use strict';

    angular.module(ng_module_name)
        .directive('repFilterSelect', filterSelect)

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

    function filterSelect($compile) {
        var directive = {
            controller: controller,
            controllerAs: 'select',
            link: link,
            replace: true,
            restrict: 'A',
            scope: {
                columns: "="
            }
        };

        return directive;
        //////////////////


        /** directive controller */
        function controller($scope, $element) {
            var ctl = this;

            ctl.list = [1,2,3,4,5];
            //////////////////

        }

        /** DOM manipulation function */
        function link(scope, element) {

            // manual compile as part of a popover
            $compile(element.contents())(scope);
        }
    }
})();

如果您在add_filter中看到我的评论,则不会填充这些选项。如果我将其更改为<option ng-repeat="i in [1,2,3,4,5]"></option>,那么它可以正常工作。

此外,如果我在select中输出{{select.list}}(并且为了测试目的而使指令成为div),则select.list的内容是正确的。

感谢愿意快速阅读的人:)

0 个答案:

没有答案