标签: angularjs-ng-transclude

我有一个可以将其全部内容排除的元素。包含是可选的，因此我可以让它的内部保留下来，但是将内部元素隐藏。让我们来看看它的作用：

    <h4 class="modal-title" ng-transclude="title">
    Are you sure you want to remove this <span ng-transclude="innerType">good</span>
    </h4>

在指令定义中，我有：

    myApp.directive('confirmDeleteModal',function(){
    return {
        restrict:'E',
        transclude: {
           title:'?modalTitle',
           innerType:'?modalType',
        },
        templateUrl:'templates/confirm_delete_modal.html',
        scope: {
           obj:'=info',
        },
     }
   });

HTML代码如下：

  <confirm-delete-modal info="goodToBeDeleted">
     <modal-type>good</modal-type>
  </confirm-delete-modal>

运行代码时，出现以下错误：[ngTransclude:orphan]。

我该怎么办？我正在使用AngularJS v1.5.8

我有一个基本指令，我想使用嵌入。相关选项设置如下：

restrict: "E",
replace: true,
transclude: {
  'toolbar': 'toolbarSlot'
},
scope: {
  pageTitle: "@"
},
templateUrl: "path/to/my/template.html"

我的模板是：

<header class="page-header">
  <h1 class="page-title heading">{{ pageTitle }}</h1>
  <div class="page-header-toolbar toolbar" ng-transclude="toolbar">
    <!-- "toolbar" transcluded content should go here -->
  </div>
</header>

最后，当我使用指令时，我是这样使用它的：

<my-custom-page-header-directive page-title="Title">
  <toolbar-slot>
    <button>Button</button>
    <button>Another button</button>
  </toolbar-slot>
</my-custom-page-header-directive>

问题是，在 DOM 中，它最终是这样的，一个无关的toolbar-slot元素混合到嵌入的内容中：

<header class="page-header">
  <h1 class="page-title heading">Title</h1>
  <div class="page-header-toolbar toolbar">
    <toolbar-slot>
      <button>Button</button>
      <button>Another button</button>
    </toolbar-slot>
  </div>
</header>

有没有办法（使用ngTransclude）只嵌入插槽元素的内容？

Angular 1.5引入了多插槽转换.根据文件:

transclude对象{slotA:'？myCustomElement'}将元素映射到slotA插槽,可以通过$ transclude函数访问

不幸的是,它没有给出任何这方面的例子.它给出的唯一例子根本没有提到插槽:

$transclude(function(clone, scope) {
  element.append(clone);
  transcludedContent = clone;
  transclusionScope = scope;
});

有人可以使用$ transclude函数了解如何访问每个插槽吗？

我有一种模式,其中许多项目类型是"可编辑的".这意味着我有许多模板(每个可编辑项类型一个),期望具有唯一的字段,但常见的功能(编辑,保存,取消编辑,删除等).这些常用功能会导致大量重复的控制器:save,edit,cancel等,非常重复性的错误处理.

我看待处理这个问题的一种方法是让每个控制器自己"装饰"(使用服务),但它也变得混乱.

我更喜欢指令,比如'可编辑':

<form name="editGroup" editable>
   <div ng-show="editMode">
    <!-- lots of fields, e.g. -->
    <input type="text" ng-model="name"></input>
    <span ng-show="editGroup.name.$error.required">The name is required</span>

    <button type="submit" ng-click="save()">Save</button>
    <button ng-click="cancel">Cancel</button>
   </div>
   <div ng-show="!editMode">
    <!-- lots of text, e.g. -->
    <span>{{name}}</span>

    <button ng-click="edit()">Edit</button>
    <button ng-click="delete()">Delete</button>
   </div>
</form>

问题是所有模型都来自控制器范围,因为它们对于此模板是唯一的,而重复范围项,如函数save() cancel() edit() delete()都来自指令隔离范围.

我是,混合范围,当然我无法事先知道需要提供哪些项目.所以如果我转发:

• 隔离范围:我无法访问transcluded元素中的控制器模型以及验证表单
• 控制器范围(默认):我无法访问指令中添加的函数,这首先是指令的重点!

我在这里做错了; 这样做的更好(更干净？)的方法是什么？

我正在开发一组角度指令来驱动我正在为知识库应用程序工作的工具栏.

我遇到的问题是让我的父指令处理嵌套在其中的子指令有关父指令上的模板.

我想要这样的概念,

-Toolbar - >按钮组 - > - >按钮

所以我有三个指令

xyz-toolbar xyz-toolbar-button-group xyz-toolbar-button

工具栏指令仅限于A,属性.按钮组和按钮是限制E(仅限元素).

每个指令都有独立的范围,(我通过指令中的控制器链接传递东西.)

但问题是我想在按钮组指令(内联)中使用模板并让它包含任何按钮.

例如,我有这样的标记(这是asp.net MVC中的主模板),它是一个部分视图,它被加载到工具栏将呈现的标题中.

<kb-toolbar>
    <kb-toolbar-button-group>
        <kb-toolbar-button kb-toggle="ng-class: Button.Toggled ? 'fa fa-2x fa-save': 'fa fa-2x fa-edit'" ng-attr-title="Button.Title">{{!Button.IsToggle ? Button.Text: ''}}</kb-toolbar-button>
    </kb-toolbar-button-group>
</kb-toolbar>

现在我有一个kb-toolbar指令

    app.modules.main.directive("kbToolbar", function () {
    return {
        scope: {},
        restrict: 'A',
        link: function ($scope, element, attrs) {

        },
        controller: function ($scope) {
            var buttonGroups = new Array();
            this.addButtonGroup = function (buttonGroup) {
                buttonGroups.push(buttonGroup);
            }

            $scope.buttonGroups = buttonGroups;
        }
    }
});

然后是按钮组

    app.modules.main.directive("kbToolbarButtonGroup", function …

我正在编写一个使用transclusion的自定义指令.我需要在进行转换后对已转换的DOM内容进行修改....我想在后链接或控制器中执行此操作还是...链接...？我不知道transclusion在哪里发生的事情顺序,所以我不知道如何确保我的JS在转换发生后执行.

嗨，我正在处理指令，我需要在其中编辑 DOM 添加 ng-src 属性和模型。

这是我的 DOM

     <edit-component>
      <img src="images/logo.png" title="Hearty Wear" />
    </edit-component>

我需要结果 DOM

       `<div>
         <img src="images/logo.png" title="Hearty Wear" ng-src={{myModel}} />
       </div> `

这样当我用数据更新 myModel 时，图像应该更新

更新

sam.directive('editComponent', function() { return { restrict: 'EA', transclude: true, replace: true, templateUrl: "imageTemplate.html", link: function(scope, element, attb, ctrl, transclude) { scope.data = function() { var imagedata; imagedata = arguments[5]; scope.imageModel = imagedata.base64; return element.find('img').attr('src', "data:image/png;base64," + imagedata.base64); }; } }; });

我还需要先前的src属性值来显示现有图像。

现在我正在手动更新src属性。我需要可以通过模型变量更新的解决方案

谢谢