manager
angular.module('myApp')
.controller('myCtrl', [ '$mdDialog', '$mdMedia', 'viewDialog', myCtrl]);
..
function myCtrl( $mdDialog, $mdMedia, viewDialog) {
$scope.openView = function(ev,id) {
viewDialog.showItemModal(ev,id)
};
}
template
<div ng-controller="myCtrl">
<md-list-item ng-repeat="item in itemsList">
<a open-view-dialog">
<h4> {{item.id}} </h4>
</a>
</md-list-item>
</div>
When I trigger the function directly from controller, the modal window opens correctly on click
using a custom directive
The provided directive
angular.module('myApp')
.directive('openViewDialog', function ($parse) {
return {
compile: function(tElm,tAttrs){
var exp = $parse('openView($event,item.id)')
return function (scope,elm){
elm.bind('click',function(){
exp(scope);
});
};
}
};;
});
Now I aim to eliminate the controller dependency and call the viewDialog service directly from the directive, but it is not functioning.
Below is the modified code for service injection
angular.module('myApp')
.directive('openViewDialog', function ($parse, viewDialog) {
return {
compile: function(tElm,tAttrs){
var exp = $parse('viewDialog.showItemModal($event,item.id)')
return function (scope,elm){
elm.bind('click',function(){
exp(scope);
});
};
}
};;
});