使用指令將ngModel添加到有角日期選擇器輸入

Question

我正在嘗試創建一個使用包含屬性和驗證等內容的架構對象生成的ui。因此，我需要使用指令在ui控件上設置ngModel。 ngModel的值是一個字符串，它表示作用域上架構對象的屬性路徑。

我已經為標准輸入工作，但是當使用angular ui datepicker時，出現以下錯誤。

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'myModel', can't be found!
http://errors.angularjs.org/1.2.10/$compile/ctreq?p0=ngModel&p1=myModel
at http://localhost:3000/javascripts/angular.js:78:20
at getControllers (http://localhost:3000/javascripts/angular.js:6054:39)
at nodeLinkFn (http://localhost:3000/javascripts/angular.js:6225:55)
at compositeLinkFn (http://localhost:3000/javascripts/angular.js:5634:37)
at compositeLinkFn (http://localhost:3000/javascripts/angular.js:5637:33)
at compositeLinkFn (http://localhost:3000/javascripts/angular.js:5637:33)
at publicLinkFn (http://localhost:3000/javascripts/angular.js:5539:46)
at boundTranscludeFn (http://localhost:3000/javascripts/angular.js:5653:37)
at controllersBoundTransclude (http://localhost:3000/javascripts/angular.js:6245:36)
at Object.ngIfWatchAction [as fn] (http://localhost:3000/javascripts/angular.js:18316:29)

<input class="form-control" datepicker-popup="dd-MMM-yyyy" my-model="" is open="property.calOpen" close-text="Close" ng-model="editModel.Person.Detail.DateOfBirth">

我的指令如下。

angular.module('MyDirectives',[])
.directive('myModel', function($compile , $timeout) {
    return {
        restrict: 'A',                       
        priority:0,

        link: function(scope,element, attr) {

            if(angular.isDefined(attr.ngModel))return;
            var field = scope.path ? scope.path + '.' + scope.key : scope.key;
            attr.$set("ngModel", "editModel." + field);

            console.log("in directive");
            $timeout(function(){
                $compile(element)(scope);
            });
        }
    };

由於ngModel的值存在於范圍內，我相信我需要鏈接功能而不是編譯。 我嘗試將Require: ?ngModel添加到指令中沒有任何區別。 還嘗試增加優先級，但是這將錯誤更改為Error: [$compile:ctreq] Controller 'ngModel', required by directive 'input', can't be found!

如果我刪除$compile(element)(scope)周圍的$timeout(function(){}則會彈出2個彈出式日歷，這在瀏覽數月時非常明顯。

有任何想法嗎

更新：請參閱鏈接plkr

Answer 1

您需要創建一個新的雙向綁定到本地范圍變量（作用域：true）。
使用$ parse在路徑中找到該屬性。

查看更新的柱塞