标签: angularjs-ng-transclude

我正在尝试添加一个body指令,它将有一个左面板和一个右面板.但是在这些面板之间我会有一些私有的body指令内容.我目前正在使用transclude = true选项来加载内容.但是,我正在寻找一种方法来使用两个ng-transclude.我调查了很多如何解决这个问题,但我找不到一个优雅的解决方案.我不得不在body指令的编译步骤中手动添加transcluded对象.以下是我解决的方法:

身体指令

var myApp = angular.module('myApp', []);

myApp.directive('body', function () {
    return {
        restrict: 'A',
        transclude: true,
        scope: {
            title: '@'
        },
        templateUrl: 'body.html',
        compile: function compile(element, attrs, transclude) {
            return function (scope) {
                transclude(scope.$parent, function (clone) {
                    for (var i = 0; i < clone.length; i++){ 
                       var el = $(clone[i]);
                       if(el.attr('panel-left') !== undefined) {
                            element.find('#firstPanel').html(el);
                       } else if(el.attr('panel-right') !== undefined) {
                            element.find('#secondPanel').html(el);
                       }
                    }
                });
            }
        }
    };
});

myApp.directive('panelLeft', function () {
    return { …

我们正在将我们的应用程序升级到Angular 1.3.0.在这样做的过程中,我们遇到了一些问题,其中大部分问题似乎归结为ngRepeat中ngTransclude的行为.

我们有一个指令重复一堆项目,周围有一个容器,但不拥有该容器的子容器.例如,这是一个简化的例子:

<div ng-controller="myController">
    There are {{items.length}} items.
    <div my-directive items="items">
        This item's name is {{item.name}}
    </div>
</div>

在内部,该指令包含<li ng-repeat="item in items" ng-transclude></li>其中的内容.

在更新之前,这很好.重复的,被转换的元素位于继承自ngRepeat创建的范围的范围内.从更新开始,这些项目都在一个继承自控制器的范围内,据我所知,没有办法访问由ngRepeat创建的范围.

这里有两个JS Bin示例:

• 旧的(1.3.0-beta.1)行为:http://jsbin.com/kalutu/1/edit
• 新的(1.3.0)行为:http://jsbin.com/gufunu/1/edit

我怎样才能在Angular 1.3.0中实现旧的行为或其相似之处？如果这是ngTransclude的预期行为,我怎么能重复一堆子节点而不知道它们是什么？

在编译服务的角度文档中(从第412行开始),有一个transclude函数的描述,该函数被传递到指令的链接函数中.

相关部分如下:

function([scope], cloneLinkingFn, futureParentElement)

其中(第212行):

futureParentElement:定义cloneLinkingFn将添加克隆元素的父级.

• 默认值:$element.parent()resp.$element对于transclude:'element'resp.transclude:true.

• 只有在允许包含非html元素(例如SVG元素)的transcludes和cloneLinkinFn传递时才需要,因为这些元素需要在它们通常的容器之外定义时以特殊方式创建和克隆(例如<svg>).

• 另请参阅directive.templateNamespace酒店.

futureParentElement然而,我没有看到重点.它说

定义cloneLinkingFn将添加克隆元素的父级.

但你这样做cloneLinkingFn就像这样:

transclude(scope, function (clone) {
    some_element.append(clone);
});

如果不首先定义克隆功能,则无法使用transclude函数.

适当的用途/用途是futureParentElement什么？

这是我的代码

'use strict';
angular.module('app')
    .directive('item'
            , ["$timeout"
            , "$Service"
            , function(
                $timeout
                , $utils) {
    return {
        restrict: 'A',
        scope: {
            item: '=',
        },
        transclude: true,
        link: function(scope, element, attrs, ctrl, transclude){
        },
        templateUrl: $fsUtils.getRelativeUrl('templates/item.html'),
        controller: 'ItemCtrl', 
    };
}]);

我的index.html:

<item><div>Transcluded content.</div></item>

transclude变量是undefined和ctrl变量是proto__: Object.我需要将父范围注入transcluded范围.transclude变量未定义.我哪里错了.

我的角度版本是1.1.5

谢谢.

我想第一次将它插入带有隔离范围的指令中的标记中来访问已转换元素的范围.我可以使用transclude函数访问transcluded元素的克隆,但不是第一次插入元素.

我有以下HTML

<my-directive the-name="'John Doe'">
   <my-div name="myDivName"></my-div>
</my-directive>

我有两个指令.我想要转换my-directive的内容,并能够从为transcluded元素创建的作用域中访问名为"myDivName"的变量.该变量从"my-directive"指令的隔离范围中的变量"theName"获取其内容.

这是我的Javascript代码:

var app = angular.module('test', []);
    app.directive('myDirective', function(){
      return {
        restrict: 'E',
        template: '',
        transclude: true,
        scope:{
          theName: '='
        },
        template: '<div>Hello I am My Directive and this content goes BEFORE the transclude<br><ng-transclude></ng-transclude><p>This element goes after the transclude</p></div>',
        link: function(scope, element, attrs, ctrl, transclude){
          transclude(function (clone, transcludeScope) {
          transcludeScope.myDivName = scope.theName;
          element.append(clone);//This line shouldn't be here. I just put it to illustrate that this clone has the right value in the …

Angular 1.5可以进行多重遮挡。

值得注意的是，将动态数量的项目转换为指令并在以后的时间（例如，在链接/编译中）声明这些转换的名称和位置会很有用。

为了进一步说明，我希望能够执行以下操作：

//Example usage of directive
<multi-slot-transclude-example>
<transclude1>TEST1</div>
<transclude2>TEST2</div>
<transclude3>TEST3</div>
<transclude4>TEST4</div>
.... dynamic number of items ...
</multi-slot-transclude-example>

//Example of directive that dynamically transcludes multiple items
angular.module("multiSlotTranscludeExample", [])
    .directive("directiveName", function(){
    return {
        restrict: 'E',
        transclude: {
            't1': '?transclude1',
            't2': '?transclude2',
            //I'd like this list to be able to be defined non-statically (e.g. in link)
        },
        template: '<div ng-repeat="n in transcludedElementList">'
        + '<div ng-transclude="t{{n}"></div>'
        + '</div>'
        };
})

请注意，在实现多重转换的指令声明中，我必须具有在声明时将要转换的项目数量的先验知识。

有没有一种方法可以在链接中（或使用解决方法）执行类似的操作，而该功能将保持与当前包含的功能相同？

继续关于 Angularjs 的困惑中的讨论 嵌入并隔离范围和绑定

<controller>

  <directive>

     transcluded html

  </directive>

</controller>

通过应用程序中的上述一般结构，链接讨论中暗示嵌入作用域基本上是从父作用域（控制器）继承的，并且嵌入作用域无法访问指令作用域。解释这一点的文章是http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

我的问题是 - 嵌入范围是否可以访问指令范围？

根据上面的文章，如果我们在指令的链接函数中使用 transinclude 函数并将代码编写为：

transclude(scope, function(clone, scope) {
    element.append(clone);
  });

这真的有效吗？我在我的应用程序上尝试了同样的操作，但它不起作用。这是我一直在使用的代码。

指令定义：

(function(){
    'use strict';

    angular.module('checkoutApp')
        .directive('wizardCard', ['shipToService','deliveryService','billingService', wizardCardDirective]);


    function wizardCardDirective(shipToService,deliveryService,billingService){
        return {
            restrict : 'E',
            scope : {
               current : '@',
               checkoutStates: '='
            },
            transclude:true,
            templateUrl: '/UsabilitySites/Cart/Checkout/app/components/shared/wizard-card.html',
            link: function(scope, element, attrs,ctrl,transclude){


                scope.bla == "ajcnasc";

                transclude(scope, function(clone, scope) {
                    element.append(clone);
              });


            }

        };
    }

})();

向导卡.html -

<div class="wizardContainer">
   {{bla}}
</div>

打开 html 时，范围变量范围为空。有人能告诉我为什么会发生这种情况吗？

上述问题已解决，并更新了新问题：

现在我尝试使用多槽嵌入来执行此操作，但它不起作用。 …

如果我有以下HTML:

<div id="myreactcomponent">
  <h1>Headline</h1>
  <p>Content</p>
</div>

我将一个ReactJS组件初始化为#myreactcomponent div,我可以以某种方式呈现组件内的h1和p元素吗？像这样的东西:

return (
  <Header></Header>
  { place h1 and p here }
  <Footer></Footer>
);

在ReactJS中有选择吗？

您可以检查此JSFiddle以查看我的问题的演示.

对于熟悉Angular的人:我<ng-transclude/>在React中搜索transclude选项和AngularJS指令的标记.

对于熟悉Polymer的人:我<content/>在React中搜索相应的标签.

UPDATE

我尝试了该this.props.children属性,但据我所知,这只有在初始HTML已经在React组件中时才有效.我真的需要渲染我最初渲染第一个React组件的元素的子元素.

更新2

将HTML移动到组件的初始化(如JSFiddle的更新中所示)在我的情况下不是一个选项,因为不同的系统呈现初始HTML和React组件.

我有一个如下所示样式的指令；它允许可选的嵌入元素，例如示例中使用的<dir-header>和。<dir-footer>

指令.js（部分）

module.directive(\'dir\', function () {\n    return {\n        restrict: \'E\',\n        templateUrl: \'path/template.html\',\n        transclude: {\n            \'header\': \'?dirHeader\',\n            \'footer\': \'?dirFooter\'\n        },\n        link: function (scope, elem, attrs) {\n            // do something\n        }\n    };\n});\n

模板.html

<div ng-transclude="header">\n  <!-- Transcluded header will appear here -->\n</div>\n\n<div class="static-content">\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n</div>\n\n<div ng-transclude="footer">\n    <!-- Transcluded footer will appear here -->\n</div>\n

用法

<dir>\n    <dir-header>My Header</dir-header>\n    <dir-footer>My Footer</dir-footer>\n</dir>\n

根据我这里的内容，有没有办法检测是否<dir-header>正在使用？"My header"我可以从链接函数访问传递到其中的内容\xe2\x80\x94（在本例中为字符串\xe2\x80\x94）吗？ …

我正在尝试创建一些用于包装布局的指令，以便可以从该布局中抽象出来（据我所知，这是指令的主要目标之一）。

所以我想要的是这样的：

<dialog>
  <dialog-title></dialog-title>
  <dialog-body></dialog-body>
  <dialog-footer></dialog-footer>
</dialog>

我为此创建了3个简单的伪指令

app.directive('dialog', ()=>{
  return {
    template: '<div class="dialog" ng-transclude></div>',
    replace: true,
    transclude: true,
    restrict: 'E',
  }
})

然后，我想确保在一个指令（对话框主体）中定义的模型在另一指令（对话框脚注）中可见，因为我需要该对话框上的某种形式和页脚中的某些导航按钮，而这些内容可能会被禁用，而不取决于两者之一该表格有效与否。

  <body ng-controller="MainCtrl">
    <p>age: {{age}}</p>
    <dialog>
      <p>age: {{age}}</p>
      <dialog-body>
        <form name="dialogForm">
          <p>age: {{age}}</p>
          <input ng-model="age" minlength="3"/>
        </form>
      </dialog-body>
      <dialog-footer>
        <p>age: {{age}}</p>
      </dialog-footer>
    </dialog>
  </body>

ng-modelin dialog-body将在对话框主体的范围内创建age变量，但直到我将其放入object并在中声明时，它才会出现在其他指令中MainCtrl。它是这样工作的：

  <body ng-controller="MainCtrl">
    <p>age: {{user.age}}</p>
    <dialog>
      <p>age: {{user.age}}</p>
      <dialog-body>
        <form name="dialogForm">
          <p>age: {{user.age}}</p>
          <input ng-model="user.age" minlength="3"/>
        </form>
      </dialog-body>
      <dialog-footer>
        <p>age: {{user.age}}</p>
      </dialog-footer>
    </dialog>
  </body>

和控制器：

app.controller('MainCtrl', function($scope) …