Angularjs 一个文本框上的两个指令

Question

我在一个文本框中有两个指令。一种是 datetimepicker 和 focus 指令。

日期时间选择器:

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();
          });
        }
    };
});

焦点:

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();
                }
              });
        }
    };
});

这是我的文本框

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

我收到以下错误

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

如何使这两个指令在文本框中一起工作？

Answer 1

尽量不要手动为第一个指令提供隔离范围，因为您不需要它，所以使用 scope:false ，它会这样工作。

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();
          });
        }
    };
});