自定義引導程序angularjs datepicker

我們正在使用引導程序datepicker來滿足我們的項目需求。我們需要做的是每當用戶選擇今天的日期時，日期必須在文本框中顯示「（TODAY）」，如「2008年5月12日（TODAY）」。自定義引導程序angularjs datepicker

這裏最好的辦法是什麼？因爲我們在多個地方使用這個datepicker，所以我認爲有一個像創建一個指令一般的方法會有幫助。正試圖將更改事件與datepickerPopup指令綁定，但尚未能使其工作。

這裏是我到目前爲止已經試過：

已經創建了一個裝飾。這似乎工作。但是，有一個問題，我如何訪問這個裝飾器中的父指令方法（如dateFilter，parseDate在這裏）？（對不起，如果你發現我的問題太天真了，因爲我對angularjs很陌生）。我附上了代碼。

app.config(function($provide) { 
$provide.decorator('datepickerPopupDirective', function($delegate) { 
    var directive = $delegate[0], 
     link = directive.link; 
    //closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? scope.$parent.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection, 
    //angular.extend(directive.scope, { 'monthChanged': '&' }); 

    directive.compile = function() { 
     return function(scope, element, attrs, ngModel) { 
      link.apply(this, arguments); 

       ngModel.$render = function() { 
        var date = ngModel.$viewValue ? dateFilter.apply(ngModel.$viewValue, dateFormat) : ''; 
        var currentDate = new Date(); 
        currentDate.setHours(0,0,0,0); 

        if(date.getTime() == currentDate.getTime()){ 
         element.val(date + "(TODAY)"); 
        }else{ 
         ngModel.$setViewValue(scope.date); 
        }        
        scope.date = parseDate(ngModel.$modelValue); 
        }; 
     }; 
    }; 
    return $delegate; 
});

}）;

來源

2015-05-12 Narinder Goyal

你能證明你試過了嗎？ – rapvelopment

@rozkosz。已添加裝飾者代碼。面臨我評論中提到的另一個問題。如果你能幫忙。謝謝 –

你有幾個選擇。快速和骯髒的方法是從第三方庫中提取組件到自己的指令和模板中，並根據需要進行修改。這樣做的缺點是，您將不再使用該組件。未來的版本會要求你手動更新你的指令，但你可能不關心...。

第二個選擇，是take advantage of angular's $provide.decorator

這篇文章給你一個最初的想法

What are "decorators" and how are they used?

這裏的裝飾指令定義對象

app.directive("foo", function() { 
    return { 
    replace: true, 
    template: '<div>This is foo directive</div>' 
    }; 
}); 

app.config(function($provide) { 
    $provide.decorator('fooDirective', function($delegate) { 
    var directive = $delegate[0]; 

    directive.restrict = "AM"; 
    return $delegate; 
    }); 
});

在一個基本的例子你的情況下，您將要覆蓋模板上引用的值。如果你想完全修改它，你可以修飾整個指令。

我會推薦這個作爲尋找解決第三方庫的修改時的最佳方法。

下面是一個裝飾指令的示例，用於覆蓋作用域級別函數，並在覆蓋該指令時使用現有的作用域變量。

https://jsfiddle.net/wvty8rpc/3/

來源

2015-05-12 14:18:58 domitall

感謝@domitall的幫助。創建了一個裝飾器。這似乎工作。然而，有一個問題，我如何訪問這個裝飾器中的父指令方法？（對不起，如果你發現我的問題太天真了，因爲我對angularjs很陌生）。我在下一個回覆中附加了代碼。 –

我已經更新了我的答案，包括一個小提琴，它提供了一個從原始指令訪問方法並覆蓋它的例子。沒有問題是一個壞問題！ – domitall

自定義引導程序angularjs datepicker

回答

相關問題