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

Posted 2023-05-09

【中文标题】如何使用angularjs将日期格式从控制器传递到指令

【英文标题】：how to pass date format from controller to directive using angularjs

【发布时间】：2017-12-08 20:34:37

【问题描述】：

如何将变量“$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 是在哪里声明的呢？它看起来在指令之外，是在指令所在的页面控制器中声明的吗？

日期格式在控制器内部，指令在控制器外部

第一个控制器应该加载，然后该指令应该加载

【参考方案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>