为什么只有 1 个日期选择器可见？

Question

我创建了一个 bootstrap 日期选择器：

app.directive('datePicker', function() {
  return {
    templateUrl: 'datepicker.html',
    controller: function($scope){
      console.log('it works');
      $scope.today = function() {
        $scope.dt = new Date();
      };
      $scope.today();

      $scope.showWeeks = true;
      $scope.toggleWeeks = function () {
        $scope.showWeeks = ! $scope.showWeeks;
      };

      $scope.clear = function () {
        $scope.dt = null;
      };

      // Disable weekend selection
      $scope.disabled = function(date, mode) {
        return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
      };

      $scope.toggleMin = function() {
        $scope.minDate = ( $scope.minDate ) ? null : new Date();
      };
      $scope.toggleMin();

      $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
      };

      $scope.dateOptions = {
        'year-format': "'yy'",
        'starting-day': 1
      };

      $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
      $scope.format = $scope.formats[0];

      console.log('end of controller');
    }
  };
});

当我在我的页面上放置 2 个这样的指令时，我只看到其中的 1 个？这是为什么？我怎样才能得到 2 个独立的日期，所以我 select 在第一个选择器中有一个日期，在第二个选择器中有另一个？

plunkr 参考：http://plnkr.co/edit/QoiLt339m9x6pAswY0Kc?p=preview

Answer 1

因为你错过了 restrict:'E' 属性 inside directive body.
为了使它们独立，添加 scope:{} 属性它使范围隔离。

http://plnkr.co/edit/aXW0zFR4t9kj75HxZ3kd?p=preview

为什么只有 1 个日期选择器可见？

why is there only 1 datepicker visible?

datepicker

twitter-bootstrap

angularjs