Question

出于某种原因，我无法在我的主页面中使用ng-include。现在我需要一个替代解决方案来ng-include作为我的产品环境（Microsoft Excel Online没有初始化在主页上使用ng-include）。

另外，我不想使用ng-view，因为我必须坚持单一路线。

仅供参考，我的ng-include网址将指向一个包含自己的控制器及其范围变量的html模板。

Main Page.html

<body ng-app="myapp">
    <div class="container-main" ng-controller="MainCtrl">
     <div class="container-content">
        <div ng-include="content.url"> </div>
    </div>
</div>
</body>

controller.js

angular.module('myapp').controller('MainCtrl', function ($scope) {
   $scope.content = { url : 'views/templates/mycontent.html'};
});

视图/模板/ mycontent.html：

<div class="flat-footer" ng-controller="FooterCtrl">
    <div class="icon-home" ng-click="settings=false;help=false;gohome()">
    </div>

<div class="icon-question" ng-click="settings=false;help=!help;showHelpPreview()" ng-init="help=false">
     <div class="arrow-down" ng-show="help"/>
</div>
<div class="icon-cog" ng-init="settings=false" ng-click="settings=!settings;help=false" ng-show="isloggedIn">
        <div class="arrow-down" ng-show="settings" />
</div>
  <div class="settings-list" ng-show="settings">
            <div class="pull-right icon-cancel-circle" ng-click="settings=!settings;help=false"/>
            <button type="button" class="btn btn-primary logout" ng-click="settings=!settings;help=false;logout()">Logout</button>
  </div>
    <div class="help-option" ng-show="help">
        <div class="pull-right icon-cancel-circle" ng-click="help=!help;settings=false"/>
        <div>
            <h1 class="title">//showHelpForUsecase.name//</h1>
             <p class="title-description">//showHelpForUsecase.description// </p> 
            <dl> 
            <dt class="welcome-title">  //showHelpForUsecase.subtitle// </dt>
                <dd class="welcome-definition"> //showHelpForUsecase.subdescription//</dd>
            </dl>
        </div>
         <div class="footer-help-info">
                <p class="more-info"><a href="//moreInfoURL//" target="_blank">More Info</a></p>
        </div>
        <div class="help-buttons-group">
                <button type="button" class="btn btn-default help-go-back-btn" ng-click="help=!help;settings=false">Back</button>
        </div>
    </div>
</div>

我想删除主页面中的ng-include，并在加载时将mycontent.html加载到“div.container-content”元素中。

注意：使用bind-html-unsafe属性而不是ng-include不编译html模板，只是绑定html内容，结果内部html内容根本没有绑定到它的控制器。

请帮我解决这个问题。

此致拉姆

Answer 1

bind-html-unsafe属性是ng-include的可能解决方法。

Main Page.html

<body ng-app="myapp">
    <div class="container-main" ng-controller="MainCtrl">
     <div class="container-content">
        <div bind-html-unsafe="content"> </div>
    </div>
</div>
</body>

angular.module('myapp').controller('MainCtrl', function ($scope) {
   $scope.content = { url : 'views/templates/mycontent.html'};
   
  $http.get('views/templates/mycontent.html', {cache: $templateCache}).success(function(data) {
                    var newScope = $scope.$new();
                    $scope.content =  $compile(data)(newScope);
            });
  
});

ng -s的替代方案可能包含在angularjs中吗？

Main Page.html

controller.js

视图/模板/ mycontent.html：

1 个答案: