I'm using ionic: I created a "Notification" directive that does some preprocessing to determine what type of notification ('alert', 'message' or 'important message') to display base on an object passed in an attribute. Within the template of that directive I am calling another directive called "Update Notification" - this is an item option that is revealed when the user slides the item to the left and (is supposed to) calls an update modal with a form who's model is passed through an attribute "notification."
The problem I'm having is that the template of "Update Notification" is calling showUpdateNotification() but it seems to be calling the "Notification" directive's scope functions; even though the "Update Notification" directive has a defined scope.
I want to define the update functionality in the "Update Notification" directive to be able to call it elsewhere in the app with another template, but I'm not sure how to resolve my scope issue.
Thanks for your help!
Notification Directive:
.directive("notification", function($rootScope, BibleService, FirebaseLoginService){
return{
restrict: 'AE',
scope:{
type: '@?type',
message: '=?message'
},
replace: true,
template: "<div ng-include='contentUrl'></div>",
link: function(scope, element, attrs){
scope.contentUrl = 'templates/directives/' + attrs.file + '.html';
attrs.$observe("file",function(v){
scope.contentUrl = 'templates/directives/' + v + '.html';
});
},
controller: function($scope, $rootScope){
//something interesting here.
$scope.hidden = false;
$scope.leaderImage = "";
$scope.notification = "";
$scope.canEdit = false;
if($scope.message){
$scope.leaderImage = $scope.message.leader.image;
if($scope.message.important){
$scope.type ="important"
}else{
$scope.type = "message"
}
if(FirebaseLoginService.loggedUser().id === $scope.message.leader.id){
$scope.canEdit = true;
}else{
$scope.canEdit = false;
};
}
if($scope.type === "alert" && $rootScope.pastDue){
$scope.title = "ATTENTION:"
$scope.notification = $rootScope.pastDueNotification;
}else if($scope.type === "message"){
if($scope.message){
$scope.title = $scope.message.title;
$scope.notification = $scope.message.text;
}
}else{
if($scope.message){
$scope.title = $scope.message.title;
$scope.notification = $scope.message.text;
}
}
$scope.closeNotification = function(){
$scope.hidden = true;
}
}
};
});
Notification Template:
<ion-list show-delete="false" can-swipe="true">
<ion-item ng-if="type === 'alert'" ng-hide="hidden" class="item item-icon-left notification-alert item-text-wrap" ng-href="#/app/billing">
<i class="icon ion-alert-circled light"></i>
<h2 class="light"><b>{{title}}</b></h2><hr>
<p><span class="light"><b>{{notification}}</b></span></p>
<ion-option-button class="button-calm" ng-click="closeNotification()">
Close
</ion-option-button>
</ion-item>
<ion-item ng-if="type === 'important'" ng-hide="hidden" class="item item-icon-left notification-important item-text-wrap">
<i class="icon ion-android-hand royal"></i>
<div class="row">
<div class="col-80">
<h2 class="light"><b>Important Message: </b></h2>
<hr><p ng-if="title"><span class="royal"><b>{{title}}</b></span></p>
<p class="small"><span class="light"><b>{{notification}}</b></span></p>
{{message}}
</div>
<div class="col-20">
<img class="notification-thumb" ng-src="{{leaderImage}}" alt="">
</div>
</div>
<update-notification notification="message" file="updateNotificationOption"></update-notification>
<ion-option-button class="button-calm" ng-click="closeNotification()">
Close
</ion-option-button>
</ion-item>
<ion-item ng-if="type === 'message'" ng-hide="hidden" class="item item-icon-left notification-message item-text-wrap">
<i class="icon ion-paper-airplane dark"></i>
<div class="row">
<div class="col-80">
<h2>Message:</h2>
<hr><p ng-if="title"><b>{{title}}</b></p>
<p class="small">{{notification}}</p>
{{message}}
</div>
<div class="col-20">
<img class="notification-thumb" ng-src="{{leaderImage}}" alt="">
</div>
</div>
<update-notification notification="message" file="updateNotificationOption"></update-notification>
<ion-option-button class="button-calm" ng-click="closeNotification()">
Close
</ion-option-button>
</ion-item>
Update Notification Directive:
.directive("updateNotification", function($rootScope, $localStorage, $timeout, $ionicListDelegate, ChurchService){
return{
restrict: 'E',
scope:{
notification: '='
},
replace: true,
template: "<div ng-include='contentUrl'></div>",
link: function(scope, element, attrs){
scope.contentUrl = 'templates/directives/' + attrs.file + '.html';
attrs.$observe("file",function(v){
scope.contentUrl = 'templates/directives/' + v + '.html';
});
},
controller: function($scope, $ionicModal, $location){
var ctrl = this;
$scope.notice = $scope.notification;
var church = {};
ChurchService.getbyLeader($localStorage.seedUser.leadershipID).then(function(ch){
church = ch;
});
$scope.updateNotification = function (data) {
$rootScope.show('Updating notification...');
if(church.notifications){
for (var i=0; i<church.notifications.length; i++){
var note = church.notifications[i];
if(note.date === data.date){
note = data;
}
}
}
ChurchService.update(church).then(function(){
$scope.closeUpdateNotification();
$location.path('/app/church/'+data.id);
$rootScope.hide();
}, ctrl.updateNotificationFailure);
};
ctrl.updateNotificationFailure = function(error) {
console.log('POST ERROR:', error);
$rootScope.notify("The Notification wasn't updated. Please try again later.")
};
$ionicModal.fromTemplateUrl('templates/updateNotification.html',{
scope: $scope
}).then(function(modal){
$scope.updateNotificationModal = modal;
});
// Open the update modal
$scope.showUpdateNotification = function() {
$scope.updateNotificationModal.show();
$ionicListDelegate.closeOptionButtons();
//console.log($scope.prayerObj);
};
// Triggered in the update modal to close it
$scope.closeUpdateNotification = function() {
$scope.updateNotificationModal.hide();
};
}
};
});
Update Notification Template:
<ion-option-button class="button-balanced" ng-click="showUpdateNotification()">
Edit
</ion-option-button>
Here is a Plunker (sorry the Sass didnt translate well - looks crappy)