Geek asks and answers

Angularjs two directives in one text field

I have two directives in one text box. One of them is the datetimepicker and focus directive.

DateTimePicker:

app.directive('datetimepicker', function() {
    return {
        restrict: 'A',
        require : '?ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
          element.datetimepicker({
            format: "yyyy-mm-dd  hh:ii:ss",
            autoclose: true,
            todayBtn: true
          }).on('setDate', function(e) {
            ngModelCtrl.$setViewValue(e.date);
            scope.$apply();
          });
        }
    };
});

Focus:

app.directive('focus',function($timeout) {
    return {
        restrict: 'A',
        scope : {
            trigger : '@focus'
        },
        link : function(scope, elem,attrs) {
            var focusables = $(":focusable");
            scope.$watch('trigger', function(value) {
                if (value === "true") {
                    $timeout(function() {
                        elem[0].focus();
                    });                         
                }                           
            });
            elem.bind('keydown', function(e) {
                var code = e.keyCode || e.which;
                if (code === 13) {
                    var current = focusables.index(this);
                    var next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
                    next.focus();
                    e.preventDefault();
                }
              });
        }
    };
});

This is my text box.

<input datetimepicker ng-model='dob' focus/>

I get the error below

Error: [$compile:multidir] Multiple directives [focus, datepicker] asking for new/isolated scope on: <input datepicker="" ng-model="dob" focus="">

How to make these two directives work together in a text box?

+4
source share
2 answers

Try not to manually provide the area for the first directive, because you do not need it, so use it scope:false, it will work like that.

app.directive('datetimepicker', function() {
    return {
        restrict: 'A',
        require : '?ngModel',
        scope: false,
        link: function(scope, element, attrs, ngModelCtrl) {
          element.datetimepicker({
            format: "yyyy-mm-dd  hh:ii:ss",
            autoclose: true,
            todayBtn: true
          }).on('setDate', function(e) {
            ngModelCtrl.$setViewValue(e.date);
            scope.$apply();
          });
        }
    };
});
0
source

The problem you get is that at least two directives require new or isolated areas.

, focus , focus attrs.trigger.

focus :

app.directive('focus',function($timeout) {
    return {
        restrict: 'A',
        link : function(scope, elem,attrs) {
            var focusables = $(":focusable");
            scope.$watch(attrs.trigger, function(value) {
                if (value === "true") {
                    $timeout(function() {
                        elem[0].focus();
                    });                         
                }                           
            });
            elem.bind('keydown', function(e) {
                var code = e.keyCode || e.which;
                if (code === 13) {
                    var current = focusables.index(this);
                    var next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
                    next.focus();
                    e.preventDefault();
                }
              });
        }
    };
});
0

More articles:


All Articles