angularjs-directive – 创建包含其他指令的Angular.js指令
发布时间:2020-12-17 17:12:46 所属栏目:安全 来源:网络整理
导读:我试图想出一个可重复使用的指令库.我试图实现的前两个指令是DatePicker和DateRangePicker. DateRangePicker必须包含两个DatePickers. 我希望DatePicker有一个类似于的签名: div cx-date-picker="" cx-label="myLabel" cx-id="myDate" cx-source="myDateVar
我试图想出一个可重复使用的指令库.我试图实现的前两个指令是DatePicker和DateRangePicker. DateRangePicker必须包含两个DatePickers.
我希望DatePicker有一个类似于的签名: <div cx-date-picker="" cx-label="myLabel" cx-id="myDate" cx-source="myDateVarInScope"></div> 我希望DateRangePicker看起来像这样: <div cx-date-range-picker cx-id="searchRangePicker" cx-source="myDateRangeInScope"></div> 其中myDateRangeInScope包含成员:??startDate和endDate 我查看了一些如何创建指令的示例,但我无法弄清楚如何将参数传递给基础指令.这是DatePicker的代码 angular.module('ng').directive('cxDatePicker',function () { return { restrict: 'A',scope: 'isolate',template: '<div class="control-group input-append">' + '<label for="{{theId}}" class="label">{{theLabel}}</label>' + '<input id="{{theId}}" class="input-small" type="text" ' + 'ng-model="theSource" data-date-format="dd/mm/yyyy" bs-datepicker>' + '<button type="button" class="btn" data-toggle="datepicker">' + '<i class="icon-calendar"></i></button>' + '</div>',link: function (scope,iterStartElement,attr) { var theId = attr['cxId']; scope.theLabel = attr['cxLabel'] scope.theId = attr['cxId']; scope.theSource = attr['cxSource']; } }; }); 它显示了Id和theLabel的正确值,但没有显示正确的日期. 这是DateRangePicker的代码,它无法为基础DatePickers设置属性. angular.module('ng').directive('cxDateRangePicker',template: '<div cx-date-picker="" cx-source="{{startSource}}" ' + 'cx-label="{{fromLabel}}" cx-id="{{startId}}"></div>' + '<div cx-date-picker="" cx-source="{{endSource}}" cx-label="{{toLabel}}" ' + ' cx-id="{{endId}}"></div>',attr) { var theId = attr['cxId']; scope.startId = theId + "From"; scope.endId = theId + "To"; scope.fromLabel = "From"; scope.toLabel = "To"; scope.startSource = attr['cxSource'] + ".startDate"; scope.endSource = attr['cxSource'] + ".endDate"; } }; }); 有谁能指出我的解决方案?我看到在DateRangePicker的link()方法之前调用了基础DatePickers的link()方法.因此难怪这些价值观没有通过.但我缺乏解决问题的整体概念理解.官方文档没有多大帮助. 一般来说,有没有人试图实现类似的目标 – 在其他指令之上构建指令,并通过这样做,构建一个特定于业务领域的组件库? 解决方法
关键是正确使用范围.
@属性只是静态地复制标记属性中的值,而应该使用=属性将父范围变量与指令范围变量链接起来. 我创建了 this plunker来向您展示如何正确实现这两个指令. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |