2013-05-16 52 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声望还不够高。