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）通过$includeContentLoaded发出的ng-include事件 - 进行应用范围的处理。例如：

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>

angularjs SPA - MVC风格的布局

1 个答案: