Question

我正在尝试创建一个简单的指令，但它不顺利。我的指令是一个具有日期选择器的div。键入pickmoment作为属性使用该指令：

<p>Publish: <b>{{publishedTime}}</b></p>
<div ng-model="publishedTime" pickmoment>
</div>

正如您所看到的，我正在尝试从指令内部更新publishedTime。这是行不通的。该指令定义如下：

app.directive('pickmoment', function() {
    return {
        restrict: 'A',
        scope: true,

        template: '
                <input class="datepicker" id="_pickmoment" value="now" type="text">\
                <br><br>\
                <button type="button" class="okbutton">Ok</button>\
                <button type="button">Cancel</button>',

        link: function (scope, element, attr) {
                $(element).find('.datepicker').datepicker( { format: "MM d, yyyy", autoclose:true } );
                scope.$parent[attr.ngModel] = 'default value';

                $(element).find('.okbutton').click(function () {

                    var helpDate = $('#_pickmoment').val();
                    scope.$parent[attr.ngModel] = helpDate;

                });
        },

    };
  });

ng-model变量的“默认值”设置正确但单击“确定”按钮时的任何更新都没有做任何事情。

你能帮帮我吗？谢谢！

Answer 1

更优雅的方法：

app.directive('pickmoment', function() {
    return {
        restrict: 'A',
        require:'ngModel',
        template: '
                <input class="datepicker" id="_pickmoment" value="now" type="text">\
                <br><br>\
                <button type="button" class="okbutton">Ok</button>\
                <button type="button">Cancel</button>',

        link: function (scope, element, attr,ngModelCtrl) {
                $(element).find('.datepicker').datepicker( { format: "MM d, yyyy", autoclose:true } );

                $(element).find('.okbutton').click(function () {
                    var helpDate = $('#_pickmoment').val();
                    scope.$apply(function () {
                            ngModelCtrl.$setValidity('someValidationError', scope.validateDate(helpDate));
                            ngModelCtrl.$setViewValue(helpDate);
                        });

                });
                scope.validateDate = function(date) {
                  //you can perform custom validation here, like a regex check or whatever
                };
        },

    };
  });

角度方式是需要ngModel指令，这使得验证和手动设置元素值（因为你使用jQuery）更容易，验证代码不是必需的，但当你使用指令的ngModel时，你会发现你有很多选择。当然，最有棱角的方式是根本不使用jQuery，但这完全是一个不同的讨论。

Answer 2

你也可以使用双向绑定（＆＃39; =＆＃39;）到父变量而不是访问$ parent right？。（这可能是一个评论，但我没有声誉）

AngularJS自定义指令：如何更新ng-model中指定的父变量？

2 个答案: