如何使用angularjs将日期格式从控制器传递到指令答案

【问题标题】：how to pass date format from controller to directive using angularjs如何使用angularjs将日期格式从控制器传递到指令
【发布时间】：2026-02-12 00:20:06
【问题描述】：

如何将变量“$scope.dateformat”传递给“format” 指令。请让我知道是否有任何示例可用或建议。请给我推荐更多这方面的例子。

     $scope.dateformat ="yyyy-mm-dd";

      menuModule.directive("datepicker", function(){
      return {
        restrict: "EAC", 
        require: "ngModel",
        scope: {
            "ngModel": "="
        },
        link: function(scope, elem, attr){
            $(elem).datepicker({
               format: "yyyy-mm-dd", // Above $scope.dateformat should be 
                                             //   called here
            }).on("changeDate", function(e){
                return scope.$apply(function(){
                    console.log(attr);
                    return scope.ngModel = e.format();
                });
            });

            return scope.$watch("ngModel", function(newValue){
                $(elem).datepicker("update", newValue);
            });
             }
          };
         });

【问题讨论】：

您将在链接函数的范围内获得日期格式。将 console.log(scope) 放入链接 fn 中，您将找到您的范围数据
那么这个 dateFormat 是在哪里声明的呢？它看起来在指令之外，是在指令所在的页面控制器中声明的吗？
日期格式在控制器内部，指令在控制器外部
第一个控制器应该加载，然后该指令应该加载

标签： jquery angularjs angularjs-directive

【解决方案1】：

您在全局范围内没有 $scope 变量（我希望如此）。

第一种方法

如果这个 dataFormat 是一个全局配置，你可以像这样在 angular 中将它注册为一个常量：

menuModule.constant('DATE_FORMAT', 'yyyy-mm-dd');

然后将其注入您的指令中：

menuModule.directive("datepicker", function(DATE_FORMAT){
    return {
        restrict: "EAC", 
        require: "ngModel",
        scope: {
            "ngModel": "="
        },
        link: function(scope, elem, attr){
            $(elem).datepicker({
                format: DATE_FORMAT
        });

        // .. rest is omitted
    };
});

第二种方法

如果您希望通过属性将格式传递给指令（从而使其在范围内可用），您可以将其添加为范围绑定，如下所示：

menuModule.directive("datepicker", function(){
    return {
        restrict: "EAC", 
        require: "ngModel",
        scope: {
            "ngModel": "=",
            "dateFormat": "@"
        },
        link: function(scope, elem, attr){
            $(elem).datepicker({
                format: scope.dateFormat
        });

        // .. rest is omitted
    };
});

那么每当你使用指令时，你可以像这样传递格式：

<datepicker date-format="yyyy-mm-dd"></datepicker>

或者如果它来自控制器

<datepicker date-format="{{$ctrl.dateFormat}}"></datepicker>

【讨论】：

【解决方案2】：

Directive

    scope: {
        "format": "="
    },
    link: function(scope, elem, attr){
        $(elem).datepicker({
           format: scope.format
        })
    }

HTML

     <datepicker format="dateformat"></datepicker>

【讨论】：