angularjs SPA-MVC樣式布局

Question

好的，所以我對AngularJS還是陌生的，而且學習曲線非常陡峭。

我正在開發AngularJS SPA，並掌握了基礎知識，我使用ngRoute進行路由，並且擁有基本的應用程序框架。

我遇到了下一個絆腳石，這可能是我對AngularJS框架缺乏了解，但是我正在尋求實現與SPA應用程序中的MVC布局類似的功能，我正在尋找類似以下情形的東西：

Login.html-無布局，該布局將在此頁面中定義Home.html-使用layout.tpl.html，其余內容在Home.html中定義

...依此類推，您將獲得一般ID，因此對於Homt.html，我希望進行類似的操作

<div layout="layout.tpl.html">
... rest of content
</div>

和layout.tpl.html將是

<div class="container">
  ..layout content for header, left nav, whatever is required
  <div class="content">
    <div layout-content></div>
  </div>
</div>

正如我上面所說的，我正在使用ngRoute，因此在我的模塊中設置了路由提供程序，我希望達到

@ {
Layout = "_Layout.cshtml"; // or Layout = null;
}

但是在angularjs中，關於如何實現這一點的任何建議都會受到歡迎

Answer 1

有兩種方法可以檢測ng-include何時完成加載，具體取決於您的需要：

1）通過onload屬性-用於內聯表達式。 例如：

<div ng-include="'template.html'" onload="loaded = true"></div>

2）通過ng-include發出的$includeContentLoaded事件-用於應用程序范圍的處理。 例如：

app.run(function($rootScope){
  $rootScope.$on("$includeContentLoaded", function(event, templateName){
     //...
  });
});

要么

使用指令來解決這個問題

的HTML

<div custom-include url="{{url}}"></div>

指示

app.directive('customInclude', ['$http', '$compile', '$timeout', customInclude]);
    function customInclude($http, $compile, $timeout) {
        return {
            restrict: 'A',
            link: function link($scope, elem, attrs) {
                //if url is not empty
                if (attrs.url) {
                    $http({ method: 'GET', url: attrs.url, cache: true }).then(function (result) {
                        elem.append($compile(angular.element(result.data))($scope));
                        //after sometime we add width and height of modal
                        $timeout(function () {
                            //write your own code
                        }, 1, false);
                    });
                }
            }
        };
    }

要么：

<div ng-include src="template.html"></div>