Why do dots in an Angular model name cause the controller not to be able to find it?

Question

I'm so new to Angular that I don't understand this code.

app.controller('FileConfigController-detail',
    function($scope, $http, $stateParams, FileConfigDetailsService) {
        $scope.detail.inptITResourceID = "test me";
    });

with this HTML:

                    <div class="form-group">
                        <label for="inptITResourceID">IT ResourceID</label>
                        <input class="form-control" id="inptITResourceID" type="text" ng-model="detail.inptITResourceID">
                    </div>

What I don't understand is why adding something with a DOT causes the code not to work?

Works fine with just one dot, but not .detail., that breaks it. Why?

A preceding dot would interfere with angulars scope inheritance. Interesting read here: http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs/14049482#14049482 — IronAces, Sep 01 '16 at 14:55

score 2 · Accepted Answer · answered Sep 01 '16 at 14:54

You need to define details otherwise you'll get error from javascript that you can set value of undefined. you can use this code to define detail as object with inptITResourceID property:

app.controller('FileConfigController-detail',
    function($scope, $http, $stateParams, FileConfigDetailsService) {
        $scope.detail = {
            inptITResourceID: "test me"
        };
    });

Why do dots in an Angular model name cause the controller not to be able to find it?

1 Answers1