2

我无法弄清楚如何为 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 对象在那个上下文中是什么。

任何调试此问题的帮助将不胜感激。

4

1 回答 1

2

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>
于 2013-06-14T21:54:07.537 回答