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

How to create an AngularJS directive that binds to a variable?

本文关键字：变量 AngularJS 指令 绑定 何创建 创建      更新时间：2023-09-26

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

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

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

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

并且让指令用<input type="text" />等替换它，所以我不能使用ng-model。

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

看看这是否是您想要的：

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中有一个日期选择器控件。也许它已经满足了你的需求。

相关文章：