javascript - 另一个 transclude 指令中的 Angular transclude 指令

标签 javascript angularjs transclusion

我在另一个指令中有一个 Angular Directive(指令)。两者都使用 transclude: true

我希望如果我有以下代码(取自 plunker)我会看到同样的事情 3 次。

https://plnkr.co/edit/iIyU65WdMr4jDQyKZpt1?p=preview

JS:

angular.module('app', [])

.directive('myButton', myButton)

.directive('directiveWithDirective', directiveWithDirective)

.directive('directiveWithDiv', directiveWithDiv);

function myButton(){
  return {
            restrict: 'E',
            transclude: true,
            template: '<button ng-transclude> </button>'
        };
}

function directiveWithDirective(){
  return {
            restrict: 'E',
            transclude: true,
            template: '<my-button ng-transclude> </my-button>'
        };
}

function directiveWithDiv(){
  return {
            restrict: 'E',
            transclude: true,
            template: '<div ng-transclude> </div>'
        };
}

HTML:

<div ng-app="app">
  <my-button>
    A Button
  </my-button>
  <br>
  <directive-with-directive>
    A Button
  </directive-with-directive>
  <br>
  <directive-with-div>
    <div>
      <my-button>
        A Button
      </my-button>
    </div>
  </directive-with->
</div>

my-buttondirective-with-div 的行为符合我的预期。他们将自己的内容包含在模板中。

但是,directive-with-directive 没有。我希望将文本“a button”包含在 my-button 中,然后将 my-button 扩展为一个按钮。相反,我看到了一个空白指令:

<my-button ng-transclude=""> </my-button>.

我希望

<my-button ng-transclude=""><button>A Button</button> </my-button>

我的问题是:

我对此有什么误解?它与指令被 Angular 扩展的顺序有关吗?我可以改变这个吗?

我怎样才能在另一个被嵌入的指令中包含一个指令。

最佳答案

我想你可以用这个解决你的问题:

function directiveWithDirective(){
  return {
            restrict: 'E',
            transclude: true,
            template: '<my-button><ng-transclude /> </my-button>'
        };
}

关于javascript - 另一个 transclude 指令中的 Angular transclude 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35720832/

相关文章:

javascript - 比较运算符没有返回正确的值

javascript - 子数组在数组中重复的次数 - JavaScript

syntax - 如何从同一 YAML 文件中的其他位置引用 YAML "setting"?

binding - Angular 指令隔离范围上的可选双向绑定(bind)

angularjs - 什么是 ng-transinclude?

javascript - 在 setinterval 中使用长间隔时,Node.js 崩溃

javascript - AngularJS 路由包括多个 JS 文件和目录

Angularjs如何在 Controller 中获得常量

angularjs - 如何在firebase中使用相同的方法同时更新多个对象中的数据?

javascript - plottable.js 条形图离轴渲染