Question

我尝试使用ng-include为我的网络应用中的弹出窗口创建一些部分布局。但是，出于某种原因，我在执行include时看不到HTML被渲染。在我的Overlay Service添加ngInclude

之后，这是我的HTML

<div id="cover" class="" ng-include="'/Angular/views/gears.html'"></div>

这位于我的ng-app和我的ng-controller内，所以我无法弄清楚为什么我的观点/Angular/views/gears.html没有正确显示？

我确保在浏览器中转到/Angular/views/gears.html确实提供了正确的HTML。它确实

修改

我刚刚意识到将上面的HTML直接放到页面中会呈现正确的HTML，但是，我正在尝试使用服务动态添加include，所以我认为它没有正确呈现ng-include

我的重叠式服务

app.factory('overlayService', [function () {

        var overlay = {};
        var _cover;
        var _innerContent;

        jQuery(document).ready(function () {
            _cover = jQuery(document.createElement('div')).attr({ 'id': 'cover', 'ng-include' :''}).prependTo(jQuery('#mainContent'));
        });


        overlay.show = function (templateUrl) {
                jQuery(_cover).addClass('show');

                jQuery('html,body').bind('mousewheel DOMMouseScroll', function (event) {
                    event.preventDefault();
                });

                //_cover.attr('ng-include', "'/Angular/views/"+templateUrl+"'");
                overlay.url = templateUrl;

                return _cover;
            }


          overlay.destroy = function () {
                    jQuery('html,body').unbind('mousewheel DOMMouseScroll');
                    jQuery(_cover).removeClass('show');

                }

          return overlay;

    }]);

Answer 1

您提供的是绝对路径：/Angular/views/gears.html。如果视图与index.html页面处于同一级别，请尝试仅键入views / gears.html。请查看您的网络选项卡（chrome控制台，firebug或任何其他）看看你的模板是否加载了Ajax请求。

Answer 2

不是动态地将ng-include指令附加到您的元素，而是直接在您的标记中将该指令附加到div，然后使用ng-if显示/隐藏：

<div 
    ng-if="myService.someBoolCheck('cover')" 
    ng-include="'/Angular/views/gears.html'"></div>

或者，只需在overlayService中创建一个元素，然后使用angular的内置$document service将其附加到DOM。我假设您的应用程序中只使用了一个且只有一个覆盖元素，并且它仅由您的覆盖服务控制。

Angular ng-include不起作用

2 个答案: