0

For some reason , I could not use ng-include in my main page.. Right now i need an alternative solution to ng-include as my product environment(Microsoft Excel Online is not initializing having ng-include on the main page).

Also, I dont want to use ng-view as i have to stick to single route.

FYI, My ng-include url will point to a html template containing its own controller and its scope variables.

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'};
});

views/templates/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>

I want to remove the ng-include in the main page and load the mycontent.html into "div.container-content" element on loading.

Note : Using bind-html-unsafe attribute instead of ng-include not compiling the html template and just binds the html content and resulting inner html content is not bound to its controller at all.

Please help me with a solution for this.

Regards, Ram

user2749751
  • 405
  • 7
  • 22
  • Why isn't `ng-include` working for you? What was the issue you ran into? – New Dev Dec 19 '14 at 15:31
  • Do you want to include it all the time? or Do you want display different content? – Valter Dec 19 '14 at 15:32
  • i want to display different content as per the flow goes.. I want to make it dynamic... – user2749751 Dec 19 '14 at 15:58
  • ng-include is not causing me a issue in normal mode, but when i open my app in Excel Online.. my office.initialize function is throwing error "undefined is not a function".... After debugging a lot, i found that having ng-include is the root cause for this.. For more details ... visit the page https://social.msdn.microsoft.com/Forums/office/en-US/564a4579-fe28-4f92-8b1d-e2aea06e43e6/office-js-has-issues-with-excel-online-?forum=appsforoffice – user2749751 Dec 19 '14 at 16:01
  • normally in Excel Online App content loads inside Iframe.. – user2749751 Dec 19 '14 at 16:03
  • That shouldn't (in theory) change anything. If you're building the simplest of apps with just `
    `, would the same error occur?     – New Dev Dec 19 '14 at 16:41
  • If you want different content... have you look at ui-router... depending on the url and display different content but same data/controller. It also support nesting templates – Valter Dec 19 '14 at 18:30
  • yes.. but i dont want to change the URLs.. – user2749751 Dec 20 '14 at 05:45

1 Answers1

1

bind-html-unsafe attribute is the possible workaround for 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);
            });
  
});
user2749751
  • 405
  • 7
  • 22