將ng-model轉發到指令中的元素的正確方法是什麼？

所以我有一個使用編譯函數替換元素的指令。替換元素的模板有一個我想要應用ng-model的輸入。 ng-model屬性應該應用於原始元素。將ng-model轉發到指令中的元素的正確方法是什麼？

我有工作 - 但是，當在我的指令中輸入時，模型更新滯後。使用ng-model輸入標準輸入時，更新即時顯示。

我不知道我描述這個不夠好...所以這裏的一些代碼：

這裏的HTML

<div ng-app="app"> 
    <div ng-model="test" model-forwarder></div> 
    <input ng-model="test" type="text" />  
</div>

這裏的JS

angular 
.module('app', []) 
.directive('modelForwarder', function(){ 
    return { 
     require: '^ngModel', 
     compile: function(element, attributes){ 
      element.replaceWith('<div><input type="text" /></div>'); 

      return function(scope, element, attributes, ngModel){ 
       var input = element.find('input'); 

       ngModel.$render = function() { 
        if (ngModel.$viewValue !== undefined) 
         input.val(ngModel.$viewValue); 
       }; 

       input.bind('keyup keydown keypress blur change', function (e) { 
        scope.$apply(function(){ 
         var value = input.val(); 
         ngModel.$setViewValue(value); 
        }); 
       }); 
      }; 
     } 
    }; 
});

的jsfiddle： http://jsfiddle.net/KjNL2/

我的問題是，「有沒有更好的WA這樣做？難道我做錯了什麼？「

來源

2013-12-17 gislikonrad

嘗試雙向綁定ngModel到你的指令隔離範圍

http://jsfiddle.net/bateast/RJmhB/1/

HTML：

<body ng-app="test"> 
    <my-dir ng-model="test"></my-dir> 
    <input type="text" ng-model="test"/> 
</body>

JS：

angular.module('test', []) 
    .directive('myDir', function() { 
     return { 
      restrict: 'E', 
      scope: { 
       ngModel: '=' 
      }, 
      template: '<div><input type="text" ng-model="ngModel"></div>',    
     }; 
    });

來源

2013-12-18 13:05:28

將ng-model轉發到指令中的元素的正確方法是什麼？

回答

相關問題