草庐IT

transclusion

全部标签

javascript - Angular : How can I transclude an element into a template that uses ng-repeat?

我有一个carousel指令,其中包括一些分块,用于将传入的items数组映射到元素结构数组的数组中,然后生成类似于以下伪代码的标记:这个Angular模板看起来像这样:[elementshouldbetranscludedintothisspot.]鉴于我的View代码:tagshouldappearinsidethe'carousel.html'template'sng-repeatlist.-->{{item.name}}我希望嵌入的元素绑定(bind)到最深的ng-repeat的item对象完整的Plunker和简化的测试用例可在此处获得:http://plnkr.co/edi

javascript - 如何在 Angular 工作中进行嵌套嵌入?

我无法使嵌套嵌入工作。有两个指令,都声明它们将嵌入它们的内容。当我嵌套它们时,内部没有任何内容。这里是thisfiddle,这说明了我的问题。代码如下:functionCtrl($scope){$scope.text='Nequeporroquisquamestquidoloremipsumquiadolor...';}angular.module('transclude',[]).directive('outer',function(){return{restrict:'E',replace:true,transclude:true,scope:{},template:''+'Out

javascript - Angular : ng-if and ng-repeat not working after custom transclusion

我正在尝试在angularJS中对指令进行自定义嵌入,因为我需要将两个单独的元素嵌入到两个单独的位置。问题是,虽然一些指令在嵌入的内容上继续工作,例如ng-bind其他指令,例如ng-if或ng-repeat不要这样做,即使在使用正确的范围重新编译被嵌入的元素之后也是如此。示例:http://jsbin.com/menakapoma/1/edit?html,js,output正如您在示例中看到的那样,ng-bind有效,但ng-if无效,即使它们都在同一范围内并访问相同的值.ng-if的true或false状态都不起作用。我相信这是因为ng-if指令被嵌入为注释,但是即使我将嵌入指令的

javascript - 指令,包装内容并将属性保留在原始元素上

我在创建一个包装指令所应用的元素(及其子元素)的指令时遇到了一些麻烦。考虑到AngularJS中许多其他常见的事情是多么容易,我不明白为什么这个看似常见的场景会如此困难,所以很可能是我在这里遗漏了一些东西。我想做的是将一个选择元素包装在一个div中。我正在使用transclude来保留原始选择元素及其内容,但我无法使其正常工作。HTML看起来像这样:我的指令是这样的:directiveModule.directive("mlbSelect",function(){return{template:''+''+'',transclude:'element',replace:true}});

javascript - Angular : ng-controller on directive does not work on transcluded elements within directive

Here是我的脚本:angular.module('MyApp',[]).directive('mySalutation',function(){return{restrict:'E',scope:true,replace:true,transclude:true,template:'Hello',link:function($scope,$element,$attrs){}};}).controller('SalutationController',['$scope',function($scope){$scope.target="StackOverflow";}])和html:{{

javascript - react .js : Wrapping one component into another

许多模板语言都有“slots”或“yield”语句,允许执行某种控制反转来将一个模板包装到另一个模板中。Angular有"transclude"option.Rails有yieldstatement.如果React.js有yield语句,它看起来像这样:varWrapper=React.createClass({render:function(){return(beforeafter);}});varMain=React.createClass({render:function(){return(content);}});期望的输出:beforecontentafter唉,React.

javascript - react .js : Wrapping one component into another

许多模板语言都有“slots”或“yield”语句,允许执行某种控制反转来将一个模板包装到另一个模板中。Angular有"transclude"option.Rails有yieldstatement.如果React.js有yield语句,它看起来像这样:varWrapper=React.createClass({render:function(){return(beforeafter);}});varMain=React.createClass({render:function(){return(content);}});期望的输出:beforecontentafter唉,React.