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);
    }
}
}

我的偏爱：

<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'，因此您需要更改ng-change代码以致电dateCtrl.refreshUrl()

另外，你的ng模型中引用了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来修复它。

在控制器和指令之间共享代码

2 个答案: