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

在我的角度应用程序中，我有两个输入字段在大多数视图上有一个开始和结束日期。这些由用户更新，并且结果存储在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变量，这样的指令管理更新，而控制器可以访问这些值。我无法得到我的指令中的函数来触发，并且我尝试了不同的组合，哪些变量在局部无效。我究竟做错了什么？

来源

2016-03-08 user3186332

由于您使用controllerAs: 'dateCtrl'，你需要改变你的NG-变化的代码来调用dateCtrl.refreshUrl()

此外，你必须vm.data在NG-模型，我认为也应该是引用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>

来源

2016-03-08 18:25:53 TwitchBronBron

谢谢，我试过了你的建议，但没有奏效。当我在指令模板中使用'ng-model =“vm.data.start_dt”'时，我得到了日期填写。还有什么我搞乱了吗？ – user3186332

如果你可以提供一个工作的例子，比如jsFiddle，它会更有帮助。你认为你可以把它放在一起并分享链接吗？ – TwitchBronBron

我能够通过包括bindToController: true来修复它。

来源

2016-03-09 04:24:24 user3186332

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

回答

相关问题