Question

所以我有一个使用compile函数替换元素的指令。替换元素的模板有一个我想要应用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/

我的问题是，“有更好的方法吗？我做错了吗？”

Answer 1

尝试将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>',            
        };
    });

将ng-model转发到指令内的元素的正确方法是什么？

1 个答案: