2016-04-26 5 views
0

DateRangePickerをラップする指令を作成しています。私はdaterangepickerをインスタンス化するためにリンク関数を使用しています。そして、スコープ変数を更新するためにディレクティブのコントローラにコールバックメソッドをアタッチします。問題は、それらの変数を更新していないようです。私はPLNKRを作り、私が持っている問題を実証しました。ボタンを使用してstartDateendDateが正常に更新されていることがわかります。 consoleデバッグセクションでは、コールバックメソッドが呼び出されていることがわかります。親スコープは更新されません。そして、labelScheduleと表示されるため、一方向でバインドされていることがわかります。角度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> 
+0

指令にはcamelCaseが必要です。 'dateStart'と' dateEnd'はそれぞれ 'date-start'と' date-end'になります。 –

+0

@MuliYulzaryありがとう、私はコードを更新しましたが、問題はまだそこにあります。 – Stephen

+0

また、モデルが変更されたことを知らせる必要があります.varsの更新が完了したら、更新関数で '$ scope。$ apply()'を呼び出す必要があります。 –

答えて

1

あなたはモデルがあなたがVARSを更新し終わった後ので、あなたの更新機能で$scope.$apply()を呼び出して変更された角度指示する必要があります。

+1

もう一度助けてくれてありがとう。 – Stephen

関連する問題