I have the following code:
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<div some-message></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js file
var app = angular.module('myModule', []);
var myController = function($scope) {
$scope.message = 'sdsd';
var technologies = [
{ name: "C#", likes: 0, dislikes: 0 },
{ name: "ASP.NET", likes: 0, dislikes: 0 },
{ name: "SQL", likes: 0, dislikes: 0 },
{ name: "AngularJS", likes: 0, dislikes: 0 }
];
$scope.technologies = technologies;
$scope.updateLikes = function(tech) {
tech.likes++;
}
}
app.controller('myController', myController)
app.directive('someMessage', function() {
return {
templateUrl: 'some-message.html',
controller: function($scope) {
$scope.testName = "Andrej";
console.log('tech', $scope.technologies)
// $scope.updateLikes = function(tech) {
// tech.likes++;
// }
}
}
})
and
some.message.html
<ul>
<li ng-repeat="tech in technologies">
{{ tech.name }} -- {{ tech.likes }} <button ng-click="updateLikes(tech)">Set like</button>
</li>
</ul>
so as you can see inside my module i have one controller and directive. I have function where on button click i am increasing the likes for every technology.
Because i am new to angular.js i don't know. Is there downsite if my updateLikes function is in the controller , instead of directive ?
Note i have the same function in the directive and it works same.
And why the function
updateLikes can be executed in the controller ?
As i understood when we have nested scopes the child scope can access the scope in the parent but not in the opposite case