Question

我想构建一个显示datepicker文本框的指令，即在其上使用JQuery UI的datepicker的常规文本框，因此当用户单击它们时，会打开一个datepicker框以让他们选择日期等。

我想以某种方式将此指令绑定到我的作用域上的属性。例如，如果它是普通文本框，我做了ng-model='myDate'，那么如果用户输入新日期，$scope.myDate将会更新。以同样的方式，我想从指令绑定这个字段，所以当用户选择一个日期时，它会更新它绑定的范围属性。

问题是，我想用这样的东西显示指令：

<datepicker name='something' value='2013-07-20' model='myProperty' />

让指令将其替换为<input type="text" />等。所以我不能使用ng-model。

我如何将model属性绑定到指令，以便在用户更改时更新它？

Answer 1

看看这是不是你想要的：

<强> HTML

<div ng-app="app" ng-controller="Ctrl">
    <foo model="property"></foo>
    <input type="text" ng-model="property">
</div>

<强>的Javascript

angular.module('app', [])
    .directive('foo', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: { model: '=' },
            template: '<input type="text" ng-model="model">'        
        };
    })
    .controller('Ctrl', function($scope) {
       $scope.property = 'Foobar'; 
    });

jsFiddle

为了使用ng-model而不是model，您需要将输入包装在容器标记中。这是另一个说明它的jsFiddle脚本。

最后，Angular UI Bootstrap中有一个日期选择器控件。也许它已经做了你需要的。

如何创建绑定到变量的AngularJS指令？

1 个答案: