Доля кода между контроллерами и директивами

Question

В моем угловом приложении у меня есть два поля ввода для большинства просмотров, у которых есть дата начала и окончания. Они обновляются пользователем, и результат сохраняется в URL-адресе для поддержания состояния или позволяет людям обмениваться ссылками и запускать точно, где они остановились.

Я пытаюсь извлечь это в директиве, которая обновляет URL-адрес при каждом изменении одного из этих двух полей. Кроме того, я хочу, чтобы каждый контроллер имел доступ к датам, поскольку они используются в качестве параметров запроса для других конечных точек.

Вот моя директива:

angular 
.module('dateDemo') 
.directive('DateFields',['$location', DateFields]); 

function DateFields($location) { 

return { 
    templateUrl: 'shared/partials/_dateFields.html', 
    scope: false, 
    bindToController: { 
    start_date : '=', 
    end_date : '=' 
    }, 
    controller: DateFieldCtrl, 
    controllerAs: 'dateCtrl' 
}; 

function DateFieldCtrl() { 
    var dateCtrl   = this; 
    dateCtrl.refreshUrl = refreshUrl; 

    function refreshUrl() { 
     var searchString = ''; 
     searchString += '&start_dt=' + moment(dateCtrl.start_dt).format('YYYY-MM-DD'); 
     searchString += '&end_dt=' + moment(dateCtrl.end_dt).format('YYYY-MM-DD'); 
     $location.search(searchString); 
    } 
} 
} 

Мои Partial:

<div class="col-md-3"> 
<label><i class="glyphicon glyphicon-calendar"></i> <b>Date</b></label> 
<div class="form-group"> 
    <input type="date" class="form-control input-sm" ng-model="vm.data.start_dt" ng-change="refreshURL()"> 
    <p class="text-right"><small class="help-block">From Date</small></p> 
</div> 
</div> 
<div class="col-md-3"> 
<label>&nbsp;</label> 
<div class="form-group"> 
    <input type="date" class="form-control input-sm" ng-model="vm.data.end_dt" ng-change="refreshURL()"> 
    <p class="text-right"><small class="help-block">To Date</small></p> 
</div> 

То, что я пытаюсь сделать, это связать vm.data.end_dt и vm.data.start_dt переменных, так что директива управляет а контроллеры имеют доступ к этим значениям. Я не могу заставить функцию в моей директиве запускать, и я пробовал разные комбинации той или иной переменной в частичном безрезультатно. Что я делаю не так?

Answer 1

Поскольку вы используете controllerAs: 'dateCtrl', вам необходимо изменить свой код нг-изменения вызвать dateCtrl.refreshUrl()

Кроме того, у вас есть vm.data ссылки в вашей нг-модели, я думаю, должен также быть dateCtrl

<div class="col-md-3"> 
    <label><i class="glyphicon glyphicon-calendar"></i> <b>Date</b></label> 
    <div class="form-group"> 
    <input type="date" class="form-control input-sm" ng-model="dateCtrl.start_dt" ng-change="dateCtrl.refreshURL()"> 
    <p class="text-right"><small class="help-block">From Date</small></p> 
    </div> 
</div> 
<div class="col-md-3"> 
    <label>&nbsp;</label> 
    <div class="form-group"> 
    <input type="date" class="form-control input-sm" ng-model="dateCtrl.end_dt" ng-change="dateCtrl.refreshURL()"> 
    <p class="text-right"><small class="help-block">To Date</small></p> 
    </div> 
</div> 

Answer 2

Я смог исправить это, включив bindToController: true.