I have a factory in my code where I store reusable functions for different controllers.
However, when I try to call these functions using ng-click from each controller, it doesn't seem to work as expected.
Is there a more efficient way to handle such scenarios?
view:
<body ng-app="MyApp">
<div ng-controller="MyCtrl" ng-click='hidepop()'>
<ul ng-repeat="user in users">
<li>{{user}}</li>
</ul>
<div class="nested" ng-click='showpop()' ng-controller="AnotherCtrl">
</div>
</div>
</body>
controller:
var app = angular.module("MyApp", []);
app.factory("UserService", function ($window) {
var root={};
root.showpop = function () {
alert("f")
}
root.hidepop = function () {
alert("d")
}
return root;
});
app.controller("AnotherCtrl", function($scope,$location, UserService) {
$scope.alerter = UserService;
$scope.showpop(){
$scope.alerter.showpop();
}
$scope.alerter.hidepop();
});
app.controller("MyCtrl", function($scope, UserService) {
$scope.alerter = UserService;
$scope.alerter.showpop();
$scope.alerter.hidepop();
});
Check out my fiddle here: fiddle link