2013-05-16 95 views
1

我是新來的角,並有問題得到datepicker指令工作。 jsFiddle http://jsfiddle.net/jGU95/9/說明了我一直無法克服的一些問題。angularjs bootstrap datepicker指令問題

的形式非常簡單:

<div ng-app="myApp" ng-controller="Ctrl"> 
    <br> 
    Date 1 
    <input type="text" datepicker1={{pickeropts}} ng-model="date1" /> {{date1 | date:MM/dd/yyyy}} 
    <br> 
    Date 2 
    <input type="text" datepicker2={{pickeropts}} ng-model="date2" /> {{date2 | date:MM/dd/yyyy}} 
    <br> 
    Date 3 
    <input type="text" datepicker1 data-date-format="{{format}}" ng-model="date3" /> {{date3 | date:MM/dd/yyyy}}   
</div> 

的DATEPICKER1指令的原始日期的渲染是在錯誤的格式與實際日期選取器不依賴於日期,即當日期1個文本字段選擇日期選擇器時,將使用今天的日期而不是1975年的日期啓動日期選擇器。一旦從日期選擇器中選擇日期,控件將按預期運行,包括以正確的格式顯示輸出日期字符串。

這裏是DATEPICKER1指令:

.directive('datepicker1', function(){ 
    return { 
     require: '?ngModel', 
     link: function($scope, element, attrs, controller) { 
      var originalRender; 
      var updateModel = function(ev) { 
       return $scope.$apply(function() { 
        return controller.$setViewValue(ev.date); 
       }); 
      }; 
      if (controller != null) { 
       originalRender = controller.$render; 
       controller.$render = function() { 
        originalRender(); 
        return element.datepicker.ddate = controller.$viewValue; 
       }; 
      } 
      return attrs.$observe('datepicker1', function(value) { 
       var options; 
       options = {}; 
       if (angular.isObject(value)) { 
        options = value; 
       } 
       if (typeof(value) === "string" && value.length > 0) { 
        options = angular.fromJson(value); 
       } 
       return element.datepicker(options).on('changeDate', updateModel); 
      }); 
     } 
    }; 
}) 

DATEPICKER2也有日期的原始渲染的問題,也忽略指定的格式選項。這似乎是由控制器中的datepicker元素實例化引起的。$ render函數發生在attrs。$ observe函數之前。

這裏是DATEPICKER2指令

.directive('datepicker2', function(){ 
    return { 
     require: '?ngModel', 
     link: function($scope, element, attrs, controller) { 
      var updateModel = function(ev) { 
       return $scope.$apply(function() { 
        return controller.$setViewValue(ev.date); 
       }); 
      }; 
      if (controller !== null) { 
       controller.$render = function() { 
        element.datepicker().data().datepicker.date = controller.$viewValue; 
        element.datepicker('setValue'); 
        element.datepicker('update'); 
        return controller.$viewValue; 
       }; 
      } 
      return attrs.$observe('datepicker2', function(value) { 
       var options; 
       options = {}; 
       if (angular.isObject(value)) { 
        options = value; 
       } 
       if (typeof(value) === "string" && value.length > 0) { 
        options = angular.fromJson(value); 
       } 
       return element.datepicker(options).on('changeDate', updateModel); 
      }); 
     } 
    }; 
}); 

最後,日期3日期選擇器不能正常工作,因爲$ scope.format值沒有正確發送到日期選擇器之前,插成一個字符串。

請幫我找出如何解決任何這些...

史蒂夫

回答

1

如果你不熟悉它,我會看看到的「隔離範圍」的概念angularjs 。這爲您的指令提供了一個新的範圍,可以防止與「全局」範圍相混淆。 它還允許綁定到您的屬性值作爲字符串,雙向綁定或表達式。

官方文檔,搜索'孤立'。你的眼睛可能會呆滯: http://docs.angularjs.org/guide/directive

一個更好的解釋: http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/

而對於一些視頻行動,在egghead.io檢查出5個簡短明瞭的解釋視頻(視頻開始NR 16)。我會包含這個鏈接,但是我的StackOverflow聲望還不夠高。