Recently delved into learning Angular 1.5 components and testing out some fresh concepts, however, I'm struggling to wrap my head around this particular issue:
Here's the code snippet from my Main:
angular.module('myapp',[])
.controller('appController',['$scope', '$interval',function($scope, $interval) {
$scope.action = function(remote){
// How do I execute obj.action
};
$scope.objectList = [{name: 1},{name:2},{name:3},{name:4},{name:5}];
$interval(runList, 1000);
function runList() {
// How can I call obj.action on each object in objectList? obj.action?
obj.action();
}
}]);
(function(angular) {
'use strict';
angular.module('myapp').component('obj', {
template: '<div class="box">{{obj.messsage}}</div>',
controllerAs: 'obj',
controller: function() {
var obj = this;
obj.action = function() {
obj.message = "Updated, so it was a success";
}
},
bindings: {
ngModel: '=',
action: '&'
});
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="appController">
<h1>Hello Plunker!</h1>
<obj ng-model="obj" ng-repeat="obj in objectList"></obj>
</body>
I am struggling to understand how to trigger the component's action (obj.action()) from the controller within the runList function.
My apologies if the formatting is not perfect, as I am still new to all of this.
p.s. I checked a similar question, but it didn't involve any html and wasn't specifically related to ng-repeat
If further clarification is needed: How can a component execute different components' functions within an ng-repeated list when triggered by the $interval?