使用AngularJS中的解析器和格式化程序在指令模板中执行双向绑定的问题

Question

我无法弄清楚如何使用AngularJS中指令的模板内部元素创建双向绑定。

我的例子：

HTML

<div ng-app="App">
    <div ng-controller="AppCtrl">
        <input ng-model="myValue" />{{myValue}}
        <uppercase ng-model="myValue" />
    </div>    
</div>

的Javascript

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

function AppCtrl($scope) {
    $scope.myValue = 'Hello World';
};

app.directive('uppercase', function() {
return {
    restrict : 'E',
    replace: true,
    require: 'ngModel',
    template: '<div><input ng-model="ngModel" /></div>', //If I remove the wrapping div, it works, but I have to change the ng-model attribute on the directive scope to be something else, such as 'model'
    scope: {
        ngModel: '=',
    },
    link: function(scope, element, attr, ngModel) {

        function parse(string) { //with the div in the template function is never called
            //alert('parsing');   
            //debugger;
            return (string || '').toLowerCase();
        }

        function format(string) { //with the div in the template, string is always 'undefined' and the function is only called once
            //alert('formatting');
            //debugger;
            return (string || '').toUpperCase();
        }
        ngModel.$parsers.push(parse);
        ngModel.$formatters.push(format);
    }
};    
});

http://jsfiddle.net/DuHvy/7/

问题是双向绑定已建立，但解析器和格式化程序无法正确调用。传递给这些函数的值始终是“未定义的”。如果我想要绑定的元素是模板中最外层的元素，那么我的示例将起作用，但我需要绑定到子元素。

我想我已经将其缩小到链接函数中ngModel参数的问题。我对指令不太熟悉，所以我甚至不确定ngModel对象在该上下文中是什么。

任何帮助调试此功能都将受到赞赏。

Answer 1

http://jsfiddle.net/DuHvy/8/

这种指令更适合作为使用ng-model指令修改元素的属性。这可以让你摆脱所有的模板。

<div ng-app="App">
    <div ng-controller="AppCtrl">
        <input ng-model="myValue" />{{myValue}}
        <input uppercase ng-model="myValue" />
    </div>    
</div>