DateRangePickerをラップする指令を作成しています。私はdaterangepickerをインスタンス化するためにリンク関数を使用しています。そして、スコープ変数を更新するためにディレクティブのコントローラにコールバックメソッドをアタッチします。問題は、それらの変数を更新していないようです。私はPLNKRを作り、私が持っている問題を実証しました。ボタンを使用してstartDate
とendDate
が正常に更新されていることがわかります。 console
デバッグセクションでは、コールバックメソッドが呼び出されていることがわかります。親スコープは更新されません。そして、label
がSchedule
と表示されるため、一方向でバインドされていることがわかります。角度1.5:リンク機能を使用した指令では、バインディングを通じて親スコープが更新されません
http://plnkr.co/edit/s8sB95YwXSD6oTo6b1MI?p=preview
var app = angular.module('demo', ['angularMoment']);
app.controller('Home', function ($scope) {
$scope.startDate = moment();
$scope.endDate = moment();
$scope.updateStart = function() {
$scope.startDate = moment();
};
$scope.updateEnd = function() {
$scope.endDate = moment();
};
});
app.directive('dateInput', function() {
return {
resolve: 'E',
templateUrl: 'dateInput.html',
scope: {
dateStart: '=',
dateEnd: '=',
label: '@'
},
controller: function ($scope) {
var self = this;
self.update = function (start, end, label) {
console.debug('DirectiveCtrl.update: ' + start.format('MM-DD-YYYY') + ' - ' + end.format('MM-DD-YYYY'));
$scope.dateStart = start;
$scope.dateEnd = end;
};
},
link: function (scope, element, attrs, controller) {
element.children('div').children('input').daterangepicker({
timePicker: true,
timePickerIncrement: 5,
locale: {
format: 'MM/DD/YYYY h:mm A'
}
}, controller.update);
}
}
});
HTML:
<div ng-controller="Home">
<p>
Start Date: {{startDate | amParse: 'MM-DD-YYYY'}}
<br />
End Date: {{endDate | amParse: 'MM-DD-YYYY' }}
</p>
<date-input date-start="startDate" date-end="endDate" label="Schedule"></date-input>
<button type="button" ng-click="updateStart()">Update Start</button>
<button type="button" ng-click="updateEnd()">Update End</button>
</div>
指令にはcamelCaseが必要です。 'dateStart'と' dateEnd'はそれぞれ 'date-start'と' date-end'になります。 –
@MuliYulzaryありがとう、私はコードを更新しましたが、問題はまだそこにあります。 – Stephen
また、モデルが変更されたことを知らせる必要があります.varsの更新が完了したら、更新関数で '$ scope。$ apply()'を呼び出す必要があります。 –