Paul Duer Paul Duer - 3 months ago 6
AngularJS Question

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

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?

Answer

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