AngularJS ng-model not storing values

Question

I have two directives in my project. They allow for the formatting of numeric values, with user-defined min and max, and the ability to format with symbols, one for floating-point numbers, one for integers. I have created a mock model of the directive (I have not added jGrowl for instance, and the restrictions don't apply to the fields, only to the ng-model), but only one of the values is being stored at a time. From a formatting and visual aspect, the functionality in my project is perfect. But I need all the values in the model to retain their values.

{ "varA": "1173", "varB": "153", "varC": "153", "varD": "000000153" }
not { "varC": "153.00" }  or { "varA": "1173.00" } etc...

I think that the problem lies in return values vs. $setViewValue(); and $render(); but I have added more return statements and the problem persists.

http://jsfiddle.net/yxRR8/2/

fiddle throws error as son as focus an input...please create much more simplified demo with far less calculating code) to represent your problem....one that doesn't throw errors — charlietfl, Nov 05 '13 at 16:44
What line of code are you using to update the object in the main controller? I'm having a hard time sorting through all the other code, — NicolasMoise, Nov 05 '13 at 16:44
fiddle throws error as son as focus an input...please create much more simplified demo to represent your problem....one that doesn't throw errors — charlietfl, Nov 05 '13 at 16:44
@NicolasMoise - Theoretically, focus - $setViewValue(); $render();, no return; $parsers.push - $setViewValue(); $render(); and return; blur - $setViewValue(); $render();, no return; $watch - $setViewValue(); $render();, no return; — C1pher, Nov 05 '13 at 17:23

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

Your fiddle is quite long so I didn't read through everything, but I think your problem is you are not data-binding to the parent scope. Directives by default have an isolate scope. Use something like

scope: {var: '='}

in your directive definition.

See this question, What are the nuances of scope prototypal / prototypical inheritance in AngularJS? particularly, the part on directives.

edited May 23 '17 at 10:32

Community

1
1

answered Nov 05 '13 at 16:43

NicolasMoise

7,261
10
44
65

This separated the scope, but the parent scope no longer updates at all. I tried to invoke an ng-blur on the element to update the value on the parent scope, but it didn't work. – C1pher Nov 05 '13 at 17:27

C1pher · Accepted Answer · 2013-11-08T04:46:59.503

I was able to get key-value pairs from being removed by wrapping my modelCtrl.$parsers.push() in an element.bind tied to a 'keydown' event. This prevented the directive from looping around and returning null values.

element.bind('keydown', function() {
    modelCtrl.$parsers.push(function(inputValue) {
        showAlert("Parse", 1);

        if (!prev) {
            prev = false;
            var returnVal = checkVal(inputValue, modelCtrl, "I", true, minVal, maxVal);

            if (String(returnVal) === ".") {
                setAndRender(modelCtrl, "");
                return "";
            }
            else {
                return returnVal;
            }
        }
        return String(inputValue).replace(/[^0-9 . -]/g, '');
    });
});

AngularJS ng-model not storing values

2 Answers2