As a newcomer to JavaScript frameworks, I am currently using Angular 1.0.8 in conjunction with Restangular. I would greatly appreciate a beginner-friendly explanation for my current issue.
The HTML snippet I have is very straightforward, with an <section> element (ng-app specified in the body):
<section class="comment-list block scrollable wrapper" style="height:350px" ng-controller="MessageStreamController">
<div> {{ message.message }} </div>
<div class="input-group">
<input type="text" class="form-control" ng-change="change()" ng-model="message.message" placeholder="Input your comment here">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" ng-click="clicked()">POST</button>
</span>
</div>
</section>
accompanied by the following <script>
var JApp = angular.module('JApp', ['restangular']);
JApp.controller('MessageStreamController', function($scope, Restangular) {
var service = Restangular.all('message-stream');
$scope.clicked = function() {
$scope.message = service.one('index', 1).get();
}
})
The backend response from /message-stream/index/1 simply includes:
return json_encode(array(
'message' => 'Hey there James',
'user' => 'Terry'
));
This causes the
<div> {{ message.message }} </div>input field to display 'Hey there James'. Everything functions correctly up to this point.
However, I encounter an issue where I am unable to edit the input box after it has been populated.
Several sources suggested that this problem arises when ng-repeat is not used, but I am anticipating a single JSON object from the backend.
Any guidance or suggestions on how to resolve this?
UPDATE: Switching from Restangular to $resource resolves my issue. However, I would like to understand why this occurs. Insights from individuals experienced with Restangular would be valuable.