0

何らかの理由で、メイン ページで ng-include を使用できませんでした。現在、製品環境として ng-include の代替ソリューションが必要です (Microsoft Excel Online は、メイン ページで ng-include を使用して初期化していません)。

また、単一のルートに固執する必要があるため、ng-view を使用したくありません。

参考までに、私の ng-include URL は、独自のコントローラーとそのスコープ変数を含む html テンプレートを指します。

メインページ.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」要素に読み込みます。

注 : ng-include の代わりに bind-html-unsafe 属性を使用すると、html テンプレートがコンパイルされず、html コンテンツがバインドされるだけで、結果の内部 html コンテンツはコントローラーにまったくバインドされません。

これに対する解決策を教えてください。

よろしく、ラム

4

1 に答える 1

1

bind-html-unsafe 属性は、ng-include の可能な回避策です。

メインページ.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);
            });
  
});

于 2015-01-12T05:43:56.357 に答える