Question

我正在使用指令为Angular应用程序中的许多页面提供基本模板。它看起来像这样：

angular.module('app.basicLayout', [])
    .directive('basicLayout', function () {
        return {
            restrict: 'E',
            transclude: true,
            templateUrl: '/assets/views/templates/basicLayout.html'
        }
});

和HTML：

<basic-layout>
    <h1>My layout goes here</h1>
</basic-layout>

在其中一些页面中，我想添加一个侧边栏，但仍然可以使用我的<basic-layout>指令中的布局。是否可以制作如下内容？

<basic-layout>
    <h1>My content goes here</h1>

    <the-sidebar>
        <h2>Sidebar content here</h2>
    </the-sidebar>
</basic-layout>

更新

我的指令模板文件目前如下所示：

<div class="container basic-layout">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div ng-transclude></div>
        </div>
    </div>
</div>

如果设置了<the-sidebar>，我想将模板文件更改为：

<div class="container basic-layout">
    <div class="row">
        <div class="col-md-8">
            <!-- The content here -->
            <div ng-transclude></div> 
        </div>
        <div class="col-md-4">
            <!-- The sidebar here -->
            <div ng-transclude></div> 
        </div>
    </div>
</div>

Answer 1

这是跨性别的确切案例。您可以使用一些变量布局（在这种情况下为侧边栏）参数化您的指令布局。为此，您必须将指令配置对象中的transclude属性设置为true，并指定应在指令的布局中使用{{1}注入更改内容的位置指令。像这样：

ng-transclude

现在在指令模板中：

return {
    ...
    transluce: true,
    ...
}

这样，您放在//other layout here <div ng-transclude></div>指令中的所有内容都将转移到您使用ng-transclude的元素中。

Answer 2

为此，您需要使用作为第5个参数传递的transclude函数手动转换到link函数。为了更容易，我会将模板更改为占位符：

<div>
  <content-placeholder></content-placeholder>
  <div>
    <sidebar-placeholder></sidebar-placeholder>
  </div>
</div>

然后，将每个内容放在它所属的位置：

transclude: true,
link: function(scope, element, attrs, ctrls, transclude){
  transclude(function(clone){
     var sidebar = clone.find("the-sidebar").remove();
     element.find("content-placeholder").replaceWith(clone);
     element.find("sidebar-placeholder").replaceWith(sidebar);
  });
}

这应该对你有用，但我不清楚你为什么要为一般布局建立一个指令。

如果您在Web应用程序中有很多页面（在经典的非SPA意义上），那么最好在服务器上的“母版页”中创建脚手架。

否则，如果你的意思是你对同一个应用程序有很多“观点”，我建议你查看ui-router - 特别是Nested States and Nested Views的一部分。

AngularJS：使用指令作为模板

2 个答案: