Question

我正在为具有基本功能的Angular应用程序创建自定义指令。除了指令之外，我还想添加一个类似于附加设置选项的属性，因此如果提到属性，我可以添加扩展功能。

我想做这样的事情：

 <div use-date-picker this-ngmodel="formData.dt" today></div>

在上面的自定义指令中，我希望datepicker输入字段仅在添加today属性时才具有今天的日期。现在，我不知道如何在该指令中定义函数，因此只有当'today'属性被添加到调用该指令的DIV时，它才会添加默认的今日日期。我试过这个，但它不起作用：

app.directive('useDatePicker', function() { 

    return {
        restrict: 'A',
        replace:true,
        scope: {
            thisNgmodel: '='            
        },
        template: '<div class="input-group">' +         
                    '<input type="text" class="form-control" readonly="readonly" name="dt" ng-model="thisNgmodel" datepicker-popup="{{format}}" is-open="datepickers.dt" datepicker-options="dateOptions" ng-required="true" close-text="Close" />' +
                  '</div>   ',        

        link: function(scope, element, attr) {
            console.log(scope.thisNgmodel);
            console.debug(scope);

            // Here I am trying to add the default Today's date if today attribute is added
            if (element.attr('today')) {
                $scope.today();
            }
        },

        controller: function($scope) {
                //DatePicker
                  $scope.today = function() {
                    $scope.thisNgmodel = new Date();
                  };


                // ....... etc.. etc.. with other controller settings .......
            }

    };
});

如果提到属性，我可以在指令模板中添加额外的功能吗？我在上面的代码中做错了什么？

Answer 1

指令的

控制器属性与module.controller不同。它的主要目的是与其他指令的api ...来自angularjs docs的引用

最佳实践：当您要将API公开给其他人时，请使用控制器指令。否则使用链接

你可以在链接函数中将模型的值设置为新日期......

if (element.attr('today')) {
   scope.thisNgmodel = new Date();
}

Answer 2

在发布问题时，不确定这是否是一个错字，但在链接器功能中，您传递的是scope，然后定位$scope。

link: function(scope, element, attr) {
    console.log(scope.thisNgmodel);
    console.debug(scope);

    // Here I am trying to add the default Today's date if today attribute is added
    if (element.attr('today')) {
      // $scope.today(); -- $scope doesn't live here. 
      scope.today();
    }
},

修改

试试这个：

attr.$observe('today', scope.today);

如果在标记中分配了scope.today，则应运行today函数。 Lemme知道这是否能解决它。

如何根据指令中的属性设置添加其他功能？

2 个答案: