在角度指令中獲取模型值

我爲http://eonasdan.github.io/bootstrap-datetimepicker寫了一個角度指令，我可以在datetimepicker上更新我的模型，但是當我嘗試設置defaultDate時遇到了問題在實例化過程中使用來自我的模型的值的datetimepicker控件。在角度指令中獲取模型值

這裏有一個plunker：http://plnkr.co/edit/XUQSx7s0Fle2Xes77VrM?p=preview

的script.js的index.html

var app = angular.module('app', []); 

app.controller('DemoCtrl', function($scope) { 
    $scope.modelDate = new Date("01/01/2010"); 
}); 

app.directive('datetimepicker', function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModelCtrl) { 
     // scope.$apply(); //This fixes the issue, but throws error in console 
     element.datetimepicker({ 
     defaultDate: ngModelCtrl.$modelValue 
     }) 
     .on('dp.change', function(e) { 
     ngModelCtrl.$setViewValue(e.date); 
     scope.$apply(); 
     }); 
    } 
    }; 
});

相關部分

<div class="container"> 
    <div class="form-group col-xs-6"> 
    <div class="input-group date" datetimepicker ng-model="modelDate"> 
     <input type="text" class="form-control" /> 
     <span class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
     </span> 
    </div> 
    Date from model: {{modelDate}} 
    </div> 
</div>

它看起來像這個問題是在當時的DateTimePicker得到實例化，模型爲null。在實例化datetimepicker之前做scope.$apply()可以解決這個問題，但是在控制檯中會拋出一個錯誤，而這並不是解決這個問題的正確方法。任何幫助，將不勝感激！

來源

2015-02-09 Jay

在我們的示波器上強制執行$ apply調用並不是最明智的做法。也許你應該嘗試推遲到下一個摘要週期？

使用一個實用程序庫（如Underscorejs），請嘗試以下操作：

_.defer(function(){scope.$apply();});

來源

2015-02-09 16:23:58 rageandqq

謝謝你的提示。我將'link'函數的整個主體移到了'defer'中，它似乎在不需要'scope'的情況下工作。$ apply（）;'這是最好的方法嗎？ – Jay 2015-02-09 16:33:27

那麼，你要確保''datepicker''元素已經在DOM上初始化了，然後再放置一個事件處理程序。不知道這是否是最好的方法，但這是一個可行的解決方案，不會激怒AngularJS神！（請參見[反模式]（https://github.com/angular/angular.js/wiki/Anti-Patterns）） – rageandqq 2015-02-09 16:41:23

在角度指令中獲取模型值

回答

相關問題