Struggling to grasp Angular concepts such as scopes has been a challenge for me.
Recently, I encountered an issue where ng-repeat was not updating after adding a new 'wire' to my array. I suspected it could be due to the array being out of scope when adding to it, but that didn't seem to be the case.
Below is the code snippet:
<body ng-app="wireApp" ng-controller="AddWireController">
<header>
<form role="form" class="form">
<div class="form-group">
<input type="text" placeholder="Description" class="form-control" name="wireDescription" ng-model="wire.description">
<input type="text" placeholder="URL" class="form-control" name="wireURL" ng-model="wire.URL">
<input type="text" placeholder="Tags" class="form-control" name="wireTags" ng-model="wire.tags">
<input type="text" placeholder="Groups" class="form-control" name="wireGroups" ng-model="wire.groups">
</div>
<button class="btn btn-primary btn-block" ng-click="addwire(wire)">Add+</button>
</form>
</header>
<div id="timeline" ng-controller="ListWireController">
<div ng-repeat="wire in wires">
<div class="timeline-entry">
<div class="timeline-stat">
<div class="timeline-icon bg-info"><i class="fa fa-envelope fa-lg"></i></div>
<div class="timeline-time">{{ wire.linLastTouched }}</div>
</div>
<div class="timeline-label">
<h4 class="text-info text-lg">{{ wire.linDescription }}</h4>
<p>{{ wire.tags }}</p>
</div>
</div>
</div>
</div>
</body>
And here is the angular javascript:
var wireApp = angular.module('wireApp', []);
//Parent controller
wireApp.controller('AddWireController', ['$scope', function($scope) {
$scope.addwire = function(wire) {
$.post('/wire/create', wire, function(data) {
$scope.$broadcast('addwire', data); //emit to children
});
};
}]);
//Child of AddWireController
wireApp.controller('ListWireController', ['$scope', function($scope) {
$scope.wires = [];
$scope.getwireByGroup = function(groupID) {
$.get('/wire/grpID=' + groupID, function(data) {
$.each(data.wires, function(index, key){
var newKey = key;
newKey.linLastTouched = jQuery.timeago(newKey.linLastTouched);
$scope.wires.push(newKey);
});
});
};
$scope.$on('addwire', function(event, mass) {
$scope.addwire(mass);
});
$scope.addwire = function(wire){
$scope.$apply(function() {
$scope.wires.push(wire);
});
}
//init data
$scope.getwireByGroup(0);
}]);
Additional question:
I've noticed that using $broadcast creates a dependency between the two controllers. If I wanted to avoid this dependency, would implementing a factory with promises be the solution? Can you provide an example using the existing code?
EDIT:
Special thanks to Simon H and Keval Bhatt for helping me understand the problem rather than just providing a quick fix.
Below is the revised working code (angular):
var wireApp = angular.module('wireApp', []);
wireApp.factory('wireFactory', function($http){
var wires = [];
return {
getwireByGroup: function(groupID){
$http.get('/wire/grpID=' + groupID)
.success(function(data) {
$.each(data.wires, function(index, key){
var newKey = key;
newKey.linLastTouched = jQuery.timeago(newKey.linLastTouched);
wires.push(newKey);
});
});
return wires;
},
addwire: function(wire){
$http.post('/wire/create', wire)
.success(function(data) {
wires.push(data);
});
}
}
});
//Parent controller
wireApp.controller('AddWireController', function($scope, wireFactory) {
$scope.addwire = function(wire) {
wireFactory.addwire(wire);
};
});
//Child of AddwireController
wireApp.controller('ListWireController', function($scope, wireFactory) {
$scope.wires = [];
$scope.getwireByGroup = function(groupID) {
$scope.wires = wireFactory.getwireByGroup(groupID);
};
$scope.getwireByGroup(0);
});