Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

ng-model doesn't work in an <input> that uses a directive with isolated scope #3271

Closed
tonylampada opened this issue Jul 18, 2013 · 4 comments

Comments

@tonylampada
Copy link

I have an isolated-scope directive called 'adirective':

var mod = angular.module('amodule', []);

mod.directive('adirective', function ($timeout) {
    return {
        restrict: 'A',
        scope:{
        },
        link: function (scope, element, attr) {
        }
    };
});

I can use this directive in an <input>.

If I try to bind to this input with ng-model, the binding doesn't work.

Here's a fiddle that reproduces the problem.
http://jsfiddle.net/tonylampada/SRBk2/1/

I can see the same behaviour in 1.1.5.

Is this expected?

@pkozlowski-opensource
Copy link
Member

Duplicate of #1924
See the mentioned issue for more info

@tonylampada
Copy link
Author

Humm, using $parent is good enough for me.
Here's the updated fiddle:
http://jsfiddle.net/tonylampada/SRBk2/2/

Thanks!

@mehan12345
Copy link

Hi, I can't get ng-model value.
Here is my code for datepicker and time picker. Any suggestions, please?


app.directive('calendar', function () {
return {
require: '?ngModel',

            link: function (scope, el, attr, ngModel) {
                $(el).datepicker({
                    dateFormat: 'yy-mm-dd',
                    onSelect: function (dateText) {
                        scope.$apply(function () {
                            ngModel.$setViewValue(dateText);

                        });
                    }

                });
            }
        };
    });

app.directive('timePicker', function () {
return {
restrict: 'A',
require: "?ngModel",
link: function (scope, element, attrs, controller) {
if (!controller) {
return;
}

    element.timepicker();

    var val = controller.$modelValue;

    var date = controller.$modelValue ? new Date(controller.$modelValue) : null;

    controller.$setViewValue(element.timepicker('setTime', controller.$modelValue));
    //ngModel.$render = function () {
    //    var date = ngModel.$modelValue ? new Date(ngModel.$modelValue) : null;
    //};

    if (date) {
        controller.$setViewValue(element.timepicker('setTime', date));
    }

    element.on('change', function() {
        scope.$apply(function() {
            controller.$setViewValue(element.timepicker('getTime', new Date()));
        });
    });
},
};

})

@revolunet
Copy link
Contributor

this is fixed in the last release. try the jsfiddle with 1.2.2 and it works perfectly

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants