标签: angularjs-ng-transclude
何时使用transclude'true'并在Angular中转换'element'？
我何时应该使用transclude: 'true'何时transclude: 'element'？我无法transclude: 'element'在角度文档中找到任何相关信息,它们非常令人困惑.
如果有人能用简单的语言解释,我会很高兴.每个选项的好处是什么？它们之间真正的区别是什么？
这是我发现的:
Run Code Online (Sandbox Code Playgroud)transclude: true在编译函数中,您可以在transclude链接函数的帮助下操作DOM,或者您可以使用任何HTML标记上的ngTransclude指令将已转换的DOM插入到模板中.
和
Run Code Online (Sandbox Code Playgroud)transclude: ‘element’这将转换整个元素,并在compile函数中引入了transclude链接函数.您无法访问此范围,因为尚未创建范围.编译函数为有权访问范围的指令创建链接函数,transcludeFn允许您触摸克隆元素(已被转换)以进行DOM操作或使用绑定到范围内的数据.为了您的信息,这用于ng-repeat和ng-switch.
推荐指数
解决办法
查看次数
AngularJS可选ng-transclude
我在AngularJS 1.5中编写了一个名为'news'的自定义指令.
它的布局如下:
<div class="row">
<div class="largeText shadow1" ng-transclude="heading"></div>
<div class="mediumText shadow2" ng-transclude="content"></div>
</div>
该指令的JavaScript文件如下:
return {
restrict: 'E',
transclude: {
'heading': 'heading',
'content': 'content'
},
scope: {
//Some parameters here
},
templateUrl: '/directives/news.html'
};
如您所见,我的新闻指令有两个孩子,称为标题和内容字段.它可以使用如下:
<news>
<heading>
//Any content goes here
</heading>
<content>
//Any content goes here
</content>
</news>
到目前为止,该指令运行良好.我的意思是,只要标题和内容部分填充了一些内容,该指令就会按预期显示它们.但是,我试图使这些翻译插槽不是强制性的.每当我使用该指令时:
<news>
<heading></heading>
</news>
AngularJS抛出一个错误,说我没有填充内容插槽.是否有可能使这些插槽可选？
推荐指数
解决办法
查看次数
在Angular js中转换后链接函数
我在Angular中有两个指令.一个人必须被另一个人包围.我的问题是在transclude函数运行后我无法使用简单的JQuery选择器访问DOM .特别是我想编译第一个指令(主题),然后将其注入另一个指令(about-us),这样我就可以访问 about-us链接函数中的DOM元素.这是我想要实现的代码:
<section>
<topic active = "true" title = "Lorem ipsum" icon = "ti-layers">A) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore …javascript jquery angularjs angularjs-directive angularjs-ng-transclude
推荐指数
解决办法
查看次数
如何在翻译后使ngIf工作？
我有一个列表组件,我想在里面定义自定义列.这些列将被转换为组件模板的行.不幸的是,我不能在这种情况下使用ngIf.
这是我的myList组件的$ postLink函数:
const template = $templateCache.get('myList.tpl.html');
const jqTemplate = angular.element(template);
const row = angular.element(jqTemplate.children()[0]);
$transclude(clone => {
row.append(clone);
$element.html(jqTemplate.html());
});
$compile($element.contents())($scope);
这是一个最小样本的plnkr:http://plnkr.co/edit/C9Rvs8NiTYsV3pwoPF6a
这是因为terminal财产？有人可以告诉我为什么ngIf不能像预期的那样工作吗？
推荐指数
解决办法
查看次数
Angular 1.5中的多级转换
我有一个泛型<item>指令,以及一个<listing>带有过滤器和分页工具的指令,用于列出<item>:
示例:https://plnkr.co/edit/r6byzhFX5m674ONhH1JS？p = preview
该<listing>模板是这样的:
<div ng-repeat="item in items">
<item date="item">
<ng-transclude ng-transclude-slot="itemContent"></ng-transclude>
</item>
</div>
该<item>指令使用新的Angular 1.5多槽转换来轻松自定义页脚和标题:
<item data="itemData">
<header>My header</header>
<footer>My custom footer</footer>
</item>
当我尝试在使用时自定义项目时出现问题<listing>.如果我使用这样的东西:
<listing items="myItems">
<item-content>
<header>{{ item.name }}</header>
<footer>My custom footer for {{ item.name }}</footer>
</item-content>
</listing>
这是行不通的,因为<item-content>被插入<item>,但<header>并<footer>没有得到transcluded到他们适当的地方,他们无法读取item范围变量.有没有办法实现这个目标？
推荐指数
解决办法
查看次数
AngularJS:如何获取指令的未编译转换内容
我正在尝试使用指令的transclude内容(指令的原始内容,而不是模板)作为网格中行的HTML模板.
<grid attrs="...">
<action-column-template>...(html I need)...</action-column-template>
</grid>
我的想法是我需要action-column-template的原始HTML(未编译,未绑定到任何范围).
我不控制每一行的生成,因此我无法使用transclude(rowScope)手动将该操作模板绑定到每一行的范围.我只需要它作为普通的html(即"{{}}"和内部指令未被触及).
从链接函数运行transclude()fn可以获得已转换的内容,但绑定到范围并扩展了内部指令.并且编译函数的tElem参数的html()返回指令模板的HTML,而不是要转换的内容.
所以问题是:我可以将编译,控制器,preLink或postLink函数中的指令内容转换为未编译的HTML吗？
谢谢.
推荐指数
解决办法
查看次数
嵌套 - 被抄送的项目 - 范围澄清？
我已经知道transclusion是如何工作的(仅在第一级我猜),我对嵌套的transcluded项的范围有疑问.
好的,我有这个代码:
<body ng-app="docsTabsExample" ng-controller="ctrl">
<my-tabs>
<my-pane title="Hello">
<h4>Hello , The value of "i" is => {{i}}</h4>
</my-pane>
</my-tabs>
</body>
基本上我有一个controller,<my-tabs>和<my-pane >.
看myTabs指令:
.directive('myTabs', function()
{
return {
restrict: 'E',
transclude: true,
scope:
{},
controller: ['$scope', function($scope)
{
$scope.i = 2;
}],
template: '<div ng-transclude></div>'
};
})
我知道该指令的内容可以访问外部指令的范围
因此黄色部分将可以访问外部作用域(这是主控制器作用域):
这是myPane指令的代码:
.directive('myPane', function()
{
return {
require: '^myTabs',
restrict: 'E',
transclude: true,
scope:
{
},
controller: function($scope)
{ …推荐指数
解决办法
查看次数
如何使ng-transclude表现得像ng-include(在范围方面)？
我想要转发内容,好像我将内容复制粘贴到我写的文件中<div data-ng-transclude="">.我该怎么做呢？
我知道我可以使用ng-include包含模板,我可以使用脚本标签来定义模板.但这会使模板缓存变得混乱并污染模板命名空间.
我想这样做,以便我可以有一个(或更多!这就是整点)文件,我在其中定义我想要显示我的项目的方式,
<!-- list directive to show the items -->
<div data-item-list="" data-values="vm.items">
<!-- content to include to display list items -->
<div class="form-relation-picker-value" ng-bind="item.value.title"></div>
<div class="form-relation-picker-subtitle" ng-bind="item.value.subTitle"></div>
</div>
和一个文件,我在其中定义列表结构的工作方式.
<div class="list-container">
<div class="list-item"
data-ng-click="vm.select(item)"
data-ng-repeat="item in vm.items | orderBy : vm.orderBy"
data-selected="{{vm.isSelected(item)}}">
<div class="flex">
<div ng-transclude=""></div><!-- item display via transclude -->
<div class="grid-col flex-icon form-relation-picker-chrome-height-fix">
<div data-ng-show="vm.isSelected(item)" class="icon check"></div>
</div>
</div>
</div>
</div>
如果我做这样的事情,这是有效的:
<div data-item-list="" data-values="vm.items" data-template-to-use="randomhash">
<script type="text/ng-template" id="randomhash">
<div class="form-relation-picker-value" …推荐指数
解决办法
查看次数
Angular指令/子指令在ng-repeat内转换
问题是child指令绑定到parent但是语法{{name}}被忽略ng-repeat.实现这一目标的正确方法是什么？
HTML(主/子指令)
<compact-select
no-item-selected-text="Add a Customer"
no-item-selected-icon="fa-user"
search-placeholder="Type a customer name"
cs-model="customer"
cs-items="contacts"
>
<display-item-template>
<span>{{name}}</span>
or
<span>{{item.name}}</span>
</display-item-template>
</compact-select>
指示
angular.module('core').directive('compactSelect', [function($timeout) {
return {
templateUrl : 'modules/core/views/components/compact-select-tpl.html',
bindToController: true,
transclude: true,
scope: {
noItemSelectedText: '@',
noItemSelectedIcon: '@',
csModel: '=',
csItems: '=csItems'
},
controllerAs : 'ctrl',
controller : function($scope) {
}
};
}]).directive('displayItemTemplate', function($timeout) {
return {
require: '^compactSelect',
restrict: 'E'
}
});
指令模板(modules/core/views/components/compact-select-tpl.html)
<div class="compact-select-repeater-box" style="" >
<div ng-transclude ng-repeat="item in ctrl.csItems | filter:searchParam" …javascript angularjs angularjs-directive ng-repeat angularjs-ng-transclude
推荐指数
解决办法
查看次数
angularjs从插槽中删除transclude包装器
我有一个带有翻译槽的简单指令.
function wmFormControl() {
return {
replace: true,
templateUrl: 'wm-form-control.htm',
transclude: {
label: '?label',
hint: '?hint'
}
};
}
和模板
<section>
<span ng-transclude="label"></span>
<div ng-transclude></div>
<span ng-transclude="hint"></span>
</section>
这是用法
<wm-form-control>
<label>Label</label>
Blah blah blah
<hint>hint</hint>
</wm-form-control>
结果我有:
<section>
<span ng-transclude="label">
<label>Label</label>
</span>
<div ng-transclude>
Blah blah blah
</div>
<span ng-transclude="hint">
<hint>hint</hint>
</span>
</section>
有没有办法删除插槽包装？<label>和/ <hint>或具有ng-transclude的那个,例如？
我想得到什么:
<section>
<span ng-transclude="label">Label</span>
<div ng-transclude>
Blah blah blah
</div>
<span ng-transclude="hint">hint</span>
</section>
推荐指数
解决办法
查看次数