Could someone please help me solve the issue with my code?
I expected that after clicking the button, the text would be updated. However, it seems to not be working as intended.
Any assistance you can provide would be greatly appreciated.
main.js
x = angular.module('app', []);
x.directive("changer", function(myService){
return {
restrict: "E",
template: "<button>click</button>",
replace: true,
link: function (scope, elem, attrs) {
elem.click(function () {
myService.item1 = 'updated';
scope.$apply();
})
}
}
});
x.service('myService', function () {
var item = {'item1': 1, 'item2': 2};
return {
item : item,
};
});
x.controller('myController', function ($scope, myService) {
$scope.item = myService.item;
});
main.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="main.js"></script>
</head>
<body ng-controller='myController'>
<changer></changer>
{{item.item1}}
</body>
</html>
Thank you in advance for your help!