AngularJS：渲染自己的模塊不止一次

Question

我一直在AngularJS了幾天現在正在探索，我想創建一個datepicker的。我撞到了一些還不完全清楚的事情。起初，這是我寫的我的日期選擇器代碼：

angular.module('datepicker', []).directive('myDatepicker', function() { 
    return { 
     scope: { 
     clickCallback: '&', 
     options: '=' 
    }, 
    restrict: 'E', 
    templateUrl: 'datepicker.php', 
    link: function($scope, $element, $attr) {  

     $scope.day = 0; 
     $scope.month = 0; 
     $scope.year = 0; 

     $scope.years = []; 
     $scope.days = []; 
     $scope.months = getStandardMonths(); 

     $scope.init = function() { 
      for (var i = 1; i <= 31; i++) 
       $scope.days.push({ 
        value: i, 
        text: (i < 10) ? "0" + i : i 
       }); 
      $scope.days.unshift({ 
       value: 0, 
       text: "--" 
      }); 

      $scope.months.unshift({ 
       value: 0, 
       text: "--" 
      }); 

      var year = new Date().getFullYear(); 
      var start = year + 3; 
      var end = year - 50; 

      for (var j = start; j >= end; j--) { 
       $scope.years.push({ 
        value: j, 
        text: j 
       }); 
      } 
      $scope.years.unshift({ 
       value: 0, 
       text: "--" 
      }); 
     } 

     $scope.update = function() { 
      var last = 32 - new Date($scope.year, $scope.month - 1, 32).getDate(); 
      if ($scope.day > last) { 
       $scope.day = last; 
      } 

      last++; 
      if ($scope.days.length > last) { 
       var shrink = $scope.days.length - last; 
       $scope.days.splice(last, shrink); 
      } else { 
       for (var i = $scope.days.length; i < last; i++) 
        $scope.days.push({ 
         value: i, 
         text: i 
        }); 
      } 

      if ($attr.partial) { 
       $scope.dism = !($scope.year); 
       $scope.disd = !($scope.month); 
       if (!$scope.year) { 
        $scope.disd = true; 
        $scope.day = $scope.month = 0; 
       } 

       if (!$scope.month) { 
        $scope.day = 0; 
       } 
      } 
     } 

     $scope.disd = $scope.dism = ($attr.partial === undefined) ? false : $attr.partial; 

     $scope.init(); 
    } 
}; 
}); 

這是我爲了使日期選擇器模塊寫的模板：

<select ng-model="day" ng-options="d.value as d.text for d in days" ng-visible="!disd">  </select> 
<select ng-model="month" ng-options="m.value as m.text for m in months" ng-change="update()" ng-visible="!dism"></select> 
<select ng-model="year" ng-options="y.value as y.text for y in years" ng-change="update()"></select> 

而且我的使用，這是相當直前鋒：

<my-datepicker partial="true" /> 

現在，當我上面複製幾次線，它仍然呈現一個日期選擇控件（沒有多重datepickers顯示HTML頁面上）。我似乎無法理解爲什麼，如果任何人都可以在這裏提供一些線索，我會非常感激。

我有不同的項目清單，全部用自己的日期。我的下一個步驟將是列表中的對象的日期綁定到日期選擇器內的功能。

注：部分屬性是允許用戶不填寫完整的日期，但只用了一年或一年一個月。

Answer 1

我通過讀了一點關於AngularJS固定我自己的問題。我的頭腦在傳統的JavaScript編碼方式中扭曲得太多了。如果有其他人有這個問題，這裏是我的固定代碼。下面的代碼使我的日期選擇器指令的多個實例：

<div ng-controller="DatepickerController" class="md"> 
     <p><b>Datepicker (partial)</b></p> 
     <div ng-repeat="d in dates" ng-include src="'dateitem.php'" ></div> 
     <br /><br /> 
     <p><b>Datepicker (non partial)</b></p> 
     <select ng-model="selecteddate" ng-options="d as d.desc for d in dates"></select> 
     {{selecteddate}}<br/> 
     <my-datepicker ng-model="selecteddate.date"></td-datepicker> 
    </div> 

我使用NG-模型「綁定」我的MySQL格式的日期字符串。

scope: { 
     clickCallback: '&', 
     options: '=', 
     ngm: '=ngModel' 
    }, 
    require: 'ngModel', 

這些都是我的日期需要顯示爲一個datepicker對象：

function DatepickerController($scope) { 
'use strict'; 

$scope.dates = [ 
{ 
    date: "2008-04-02", 
    desc: "Full date" 
}, 

{ 
    date: "2010-02-00", 
    desc: "Missing day date" 
}, 

{ 
    date: "1999-00-00", 
    desc: "Missing month date" 
}, 

{ 
    date: "0000-00-00", 
    desc: "Empty date" 
} 
]; 

// non partial shizzle 
$scope.selecteddate = $scope.dates[0]; 
} 

活生生的例子在日期選擇的： http://sandbox.matvp.info/angularjs/?datepicker