創建包含其他指令的Angular.js指令

我試圖想出一個可重用指令庫。我試圖實現的前兩個指令是DatePicker和DateRangePicker。 DateRangePicker必須包含兩個DatePickers。創建包含其他指令的Angular.js指令

我想要的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和結束日期

我看了幾個如何創建指令的例子，但我不知道如何將參數傳遞到基本指令。這裏是顯示適當的值theId和theLabel但不顯示正確的日期的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']; 
     } 
     }; 
    });

的代碼。

這是DateRangePicker的代碼，它無法爲基礎DatePickers設置屬性。

angular.module('ng').directive('cxDateRangePicker', function() { 
     return { 
     restrict: 'A', 
     scope: 'isolate', 
     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>', 
     link: function (scope, iterStartElement, 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（）方法。因此難怪價值觀沒有通過。但我缺乏整體的概念理解來解決問題。官方文件沒有多大幫助。

一般來說，有沒有人試圖達到類似的目標 - 在其他指令之上構建指令，並通過這樣做，構建一個業務領域特定的組件庫？

來源

2013-06-01 mkvakin

http://www.youtube.com/watch?feature=player_embedded&v=WqmeI5fZcho#！這是一個不錯的視頻，它很好的闡明瞭 – mkvakin

爲什麼不使用Element指令而不是Attribute？ –

訣竅在於處理範圍。這意味着Angular.js確實擁有完善的組件架構，允許在較小的組件上構建較大的組件。與Backbone相比，這是一個很好的進步。我想知道如果Ember.js具有類似的功能。

angular.module('ng').directive('cxDatePicker', function() { 
    return { 
    restrict: 'A', 
    scope: 
     { 
     cxLabel: '@', 
     cxId: '@', 
     cxSource: '=' 
     }, 
    template: '<div class="control-group input-append">' + 
    '<label for="{{cxId}}" class="label" style="margin-right: 6px;">{{cxLabel}}</label>' + 
    '<input id="{{cxId}}" class="input-small" type="text" ng-model="cxSource" 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) {} 
    }; 
}); 


angular.module('ng').directive('cxDateRangePicker', function() { 
    return { 
    restrict: 'A', 
    scope: 
     { 
     cxId: '@', 
     cxSource: '=' 
     }, 
    template: '<div cx-date-picker="" cx-source="cxSource.startDate" cx-label="From" cx-id="{{cxId}}From" ></div>' + 
     '<div cx-date-picker="" cx-source="cxSource.endDate" cx-label="To" cx-id="{{cxId}}To" ></div>', 
    link: function (scope, iterStartElement, attr) {} 
    }; 
});

來源

2013-06-01 06:53:30 mkvakin

這一點正確地使用範圍。 @屬性只是靜態地從標籤屬性中複製值，而應該使用鏈接父範圍變量與指令範圍變量的屬性=。我創建了this plunker以向您展示如何正確實現這兩個指令。

來源

2013-06-01 07:16:48 remigio

創建包含其他指令的Angular.js指令

回答

相關問題