我正在創建簡單的ui-datetime指令。它將javascript日期對象分為_date，_hours和_minutes部分。_date使用jquery ui datepicker，_hours和_minutes-數字輸入。angular.module("ExperimentsModule", []) .directive("uiDatetime", function () { return { restrict: 'EA', replace: true, template: '<div class="ui-datetime">' + '<input type="text" ng-model="_date" class="date">' + '<input type="number" ng-model="_hours" min="0" max="23" class="hours">' + '<input type="number" ng-model="_minutes" min="0" max="59" class="minutes">' + '<br />Child datetime1: {{datetime1}}' + '</div>', require: 'ngModel', scope: true, link: function (scope, element, attrs, ngModelCtrl) { var elDate = element.find('input.date'); ngModelCtrl.$render = function () { var date = new Date(ngModelCtrl.$viewValue); var fillNull = function (num) { if (num < 10) return '0' + num; return num; }; scope._date = fillNull(date.getDate()) + '.' + fillNull(date.getMonth() + 1) + '.' + date.getFullYear(); scope._hours = date.getHours(); scope._minutes = date.getMinutes(); }; elDate.datepicker({ dateFormat: 'dd.mm.yy', onSelect: function (value, picker) { scope._date = value; scope.$apply(); } });在github上：https : //github.com/andreev-artem/angular_experiments/tree/master/ui-datetime據我了解-創建新組件時的最佳實踐是使用隔離范圍。當我嘗試使用隔離范圍時，沒有任何效果。ngModel。$ viewValue ===未定義。當我嘗試使用新范圍時（我的示例，不是很好的變體imho）-ngModel在新創建的范圍上使用值。當然，我可以創建具有隔離范圍的指令，并通過“ = expression”（示例）使用ngModel值。但是我認為使用ngModelController是更好的做法。我的問題：我可以在隔離范圍內使用ngModelController嗎？如果不可能，哪種解決方案更適合創建此類組件？
3 回答
BIG陽
TA貢獻1859條經驗 獲得超6個贊
使您的指令以比ngModel更高的優先級運行，并為孤立的作用域更正模型綁定。在高優先級模板操作（例如ngRepeat）之后，但在默認值0（ngModel使用的默認值）之后，我選擇了與輸入指令相同級別的優先級“ 100”。
這是示例代碼：
myDirective = function() {
return {
compile: function(tElement, tAttrs, transclude) {
// Correct ngModel for isolate scope
if (tAttrs.ngModel) {
tAttrs.$set('model', tAttrs.ngModel, false);
tAttrs.$set('ngModel', 'model', false);
}
return {
post: function(scope, iElement, iAttrs, controller) {
// Optionally hook up formatters and parsers
controller.$formatters.push(function(value) {
// ...
})
// Render
return controller.$render = function() {
if (!controller.$viewValue) {
return;
}
angular.extend(scope, controller.$viewValue);
};
}
};
},
priority: 100,
require: '^ngModel',
scope: {
model: '='
},
};
}
在編譯期間，偽指令檢查ngModel屬性是否存在。該檢查使用Angular的Attributes對歸一化值進行處理。如果存在該屬性，則將其替換為“ model”（不是“ ngModel”），這是數據綁定到我們隔離區中的名稱。但是，我們還必須創建一個屬性，以便Angular可以為我們執行數據綁定。可以使用一個false使DOM保持不變的參數（可以選擇）修改這兩個屬性。
- 3 回答
- 0 關注
- 660 瀏覽
添加回答
舉報
0/150
提交
取消