directive without scope setting value undefined

Question

In my angular app, I've to use different directives on a single field.

here are my directives

angular.module('app')  
.directive('focusMe', function ($timeout) {
    return {
        scope: { trigger: '@focusMe' },
        link: function (scope, element, attr) {

            scope.$watch('trigger', function (value) {
                if (value === "true") {

                    $timeout(function () {
                        element[0].focus();
                    });
                }
            });
        }
    };
});

and another one for datepicker

.directive('ngDatepicker', function() {
return {
restrict: 'A',
replace: true,
scope: {
  ngOptions: '=',
  ngModel: '='
},
template: "<div class=\"input-append date\">\n  <input type=\"text\"><span class=\"add-on\"><i class=\"icon-th\"></i></span>\n</div>",
link: function(scope, element) {
  scope.inputHasFocus = false;
  element.datepicker(scope.ngOptions).on('changeDate', function(e) {
    var defaultFormat, defaultLanguage, format, language;
    defaultFormat = $.fn.datepicker.defaults.format;
    format = scope.ngOptions.format || defaultFormat;
    defaultLanguage = $.fn.datepicker.defaults.language;
    language = scope.ngOptions.language || defaultLanguage;
    return scope.$apply(function() {
      return scope.ngModel = $.fn.datepicker.DPGlobal.formatDate(e.date, format, language);
    });
  });
  element.find('input').on('focus', function() {
    return scope.inputHasFocus = true;
  }).on('blur', function() {
    return scope.inputHasFocus = false;
  });
  return scope.$watch('ngModel', function(newValue) {
    if (!scope.inputHasFocus) {
      return element.datepicker('update', newValue);
    }
  });
}
  };
});

it throws me an error

Multiple directives asking for new/isolated scope

after hours of searching and working on different solutions, i finally understand this one same like my problem and changed my first directive like this

angular.module('app')  
.directive('focusMe', function ($timeout) {
    return {
        link: function (scope, element, attr) {
            scope.$watch(attr.focusMe, function (value) {
                if (value === "true") {
                    $timeout(function () {
                        element[0].focus();
                    });
                }
            });
        }
    };
})

But now its not working because it always gives me value = undefined and I don't know why it is happening. May be I'm missing something here or not doing it properly??

here is my html where I'm binding its value

<input type="text"  focus-me="{{ DateOfBirthFocus }}" ng-datepicker>

Any kind of help will be appreciated.

Beware of double binding boolean values: they are copied by value, not for reference, so maybe you'll be missing a "change" in the variable. — illeb, Aug 17 '16 at 11:12
consider this answer: http://stackoverflow.com/questions/18014471/how-to-bind-boolean-values-in-angular-directives — illeb, Aug 17 '16 at 11:34
it helped me to resolve my issue but I'm getting another issue that focusMe directive find those elements null where I've defined ng-datepickr directive. (eg datepicker field always be null for focusMe directive) — Naila Akbar, Aug 17 '16 at 12:03
please share some code in a plunker or something, i can't look forward your issue without it. — illeb, Aug 17 '16 at 13:56
that's because you ng-datepicker it's **replacing** your element (it's a directive with replace: true, assuming you are using bootstrap angular < 2.0) Try to update your libraries of bootstrap and see if it resolves your issue. — illeb, Aug 17 '16 at 15:52
issue was in initialization of ng-model value. i was initializing it like this *$scope.DateOfBirthFocus = ''* but the correct way is *$scope.DateOfBirthFocus = {}* now I'm getting object in ng-model. — Naila Akbar, Aug 18 '16 at 05:26

directive without scope setting value undefined

0 Answers0