AngularJS指令:多个被剔除的元素
发布时间:2020-12-17 07:16:57 所属栏目:安全 来源:网络整理
导读:我正在尝试添加一个body指令,它将有一个左面板和一个右面板.但是在这些面板之间我会有一些私有的body指令内容.我目前正在使用transclude = true选项来加载内容.但是,我正在寻找一种方法来使用两个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 { require: "^body",restrict: 'A',replace: true,template: '<div ng-transclude></div>' }; }); myApp.directive('panelRight',template: '<div ng-transclude></div>' }; }); 模板 <script type="text/ng-template" id="body.html"> <h1> {{title}} </h1> <hr/> <div id="firstPanel" class="inner-panel"></div> <div id="innerMiddleContent" class="inner-panel">middle private content here</div> <div id="secondPanel" class="inner-panel"></div> </script> <div body title="Sample Body Directive"> <div panel-left> Public content that goes on the left </div> <div panel-right> Public content that goes on the right </div> </div> Here是这个例子的JSFiddle.我正在寻找这样的东西: 好的模板 <script type="text/ng-template" id="body.html"> <h1> {{title}} </h1> <hr/> <div id="firstPanel" class="inner-panel" ng-transclude="panel-left"></div> <div id="innerMiddleContent" class="inner-panel">middle private content here</div> <div id="secondPanel" class="inner-panel" ng-transclude="panel-right"></div> </script> 问题:我做错了吗?有没有推荐的方法来解决这个问题? 解决方法
你看过这个指令吗?
https://github.com/zachsnow/ng-multi-transclude 我认为这正是你要找的. 所以只需对模板稍作修改即可 <div ng-multi-transclude="panel-left" class="inner-panel"></div> <div ng-multi-transclude="panel-right" class="inner-panel">middle private content here</div> <div id="secondPanel" class="inner-panel"></div> 然后你可以像这样使用它 <div body title="Sample Body Directive"> <div name="panel-left"> Public content that goes on the left </div> <div name="panel-right"> Public content that goes on the right </div> </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |