CODEWITHSUNDEEP
javascriptjqueryangularjsoffice-app
user2749751
user2749751

Reputation: 405

Alternatives to ng-include in angularjs possible?

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

Upvotes: 0

Views: 5122

Answers (1)

user2749751
user2749751

Reputation: 405

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

Upvotes: 1

Related Questions