将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转发到指令中的元素的正确方法是什么？

回答

相关问题