加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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来向您展示如何正确实现这两个指令.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读