控制器和指令之間的共享代碼

在我的角度應用程序中，我有兩個輸入字段在大多數視圖上有一個開始和結束日期。這些由用戶更新，並且結果存儲在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

控制器和指令之間的共享代碼

回答

相關問題