Hi!
I’m trying to do a simple application whereby if I click a button, the text in the card would change according to what button I click on. Here is a sample of my code:
The body tag is:
<body ng-app="app" ng-controller="MainCtrl">
The rest of it is:
<div class="list card" id="rosary-card21" ng-controller="cardCtrl">
<h4 id="rosary-heading5" style="color:#5239FF; text-align: center">Prayer</h4>
<div id="rosary-markdown3" style="color:black; height: 200px" >
<p>
Show Something!
<my-directive data="myData">
</my-directive>
</p>
</div>
</div>
<!-- bead section-->
<div ng-controller="beadCtrl">
<ion-slides options="options" style="height: 270px; width: 130px;">
<ion-slide-page><button class="button button-clear button-large" ng-click="changeMyData('ONE')">
1</button></ion-slide-page>
<ion-slide-page><button class="button button-clear button-large" ng-click="changeMyData('TWO')">
2</button></ion-slide-page>
<ion-slide-page><button class="button button-clear button-large" ng-click="changeMyData('THREE')">
3</button></ion-slide-page>
</ion-slides>
</div>
As you can see above this is from the HTML file whereby, the button is in an ion-slide-page and each of the button.
My js controller is as below:
var app = angular.module('app');
app.controller('MainCtrl', function($scope){
$scope.myData = {
value: 'No value yet'
}
$scope.display = {
value: 'Not fired yet'
}
});
app.controller('beadCtrl', function($scope, $rootScope){
$scope.changeMyData= function(param) {
$scope.myData.value = param;
};
$scope.options ={
direction: 'vertical',
slidesPerView: '3',
paginationClickable: true,
showNavButtons: false
};
});
app.controller('cardCtrl', ['$scope', function($scope, $rootScope){
$rootScope.$on('myEvent', function(e, val){
$scope.display.value = val;
});
}]);`
app.directive('myDirective', function($rootScope) {
console.log('Start directive');
return {
template: '{{ myData.value }}',
scope: {myData : '=data'},
link: function(scope, element, attrs) {
scope.$watch(attrs.data, function(newVal, oldVal) {
if (newVal != oldVal) {
console.log('myData has changed');
console.log(newVal);
}
}, true);
}
}
});
The error that is shown from the console is:
2 913459 error TypeError: Cannot read property '$on' of undefined
at new <anonymous> (http://localhost:8100/js/app.js:64:15)
at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:17762:17)
at extend.instance (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22311:34)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21421:36)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20853:13)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21457:24)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20853:13)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21457:24)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20853:13)
at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20728:30)
If I were to remove the ng-controller in the HTML file for cardCtrl(), then if I were to click on the button this error occurs:
1 712454 error TypeError: Cannot set property 'value' of undefined
at Scope.$scope.changeMyData (http://localhost:8100/js/app.js:37:23)
at fn (eval at compile (http://localhost:8100/lib/ionic/js/ionic.bundle.js:26457:15), <anonymous>:4:239)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:62386:9
at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:29158:28)
at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:29257:23)
at HTMLButtonElement.<anonymous> (http://localhost:8100/lib/ionic/js/ionic.bundle.js:62385:13)
at HTMLButtonElement.eventHandler (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16583:21)
at triggerMouseEvent (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2948:7)
at tapClick (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2937:3)
at HTMLDocument.tapMouseUp (http://localhost:8100/lib/ionic/js/ionic.bundle.js:3013:5)
Any help would be great especially on how to solve the $on issue. Thanks! And if anybody could point out anywhere on the web on how to achieve my simple function of a clicking a button and change a text in a ionic-card.