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