I have this small piece of code to open a toaster dialog when a button is clicked. However, when I click on the button, nothing happens. I have removed the http get part of the code for simplification of this problem.
(function () {
app.controller('NewScheduleController', ['$scope', '$http', 'toaster', function ($scope, $http, toaster) {
$scope.cancelSchedule = function () {
toaster.success({ title: "Success", body: "Cancelled successfully!" });
}
} ]);
})();
and the view
<div class="container" ng-controller="NewScheduleController">
<div class="form-horizontal">
<div class="jumbotron">
<button ng-click="cancelSchedule()">Cancel</button>
</div>
</div>
<toaster-container toaster-options="{
'closeButton': false,
'debug': false,
'position-class': 'toast-top-right',
'onclick': null,
'showDuration': '200',
'hideDuration': '1000',
'timeOut': '5000',
'extendedTimeOut': '1000',
'showEasing': 'swing',
'hideEasing': 'linear',
'showMethod': 'fadeIn',
'hideMethod': 'fadeOut'
}"></toaster-container>
Please suggest if I am doing anything wrong? Also being an angularjs newbie, I would like to know how to know what is the underlying error? I use chrome's inspect element to look at console/network tabs but there are no errors.
I think you're not including the angular-animate module in the scripts
<script src="http://code.angularjs.org/1.3.3/angular-animate.min.js"></script>
Look at this plunker example.
Related
I have a modal in Ionic that shows a list of country flags for the user to choose, however my ng-click on the language flag don't appear to fire the $scope.function() I have assigned. Here's what I've got:
Showing the modal:
$scope.showLanguages = function() {
var myPopup = $ionicPopup.show({
templateUrl: 'templates/languageSelect.html',
title: 'Language Select',
scope: $scope,
buttons: [
{
text: '<b>Close</b>',
type: 'button-positive',
onTap: function (e) {
return;
}
}
],
cssClass: 'animated bounceInDown'
});
}
My template that displays my flags, with the ng-click on them:
<div class="row">
<button ng-class="getFlagClass(language)" ng-click="setLanguage()" class="col flag-icon flag-icon-squared" ng-repeat="language in data.languages" />
</div>
And finally my ng-click function which is on the same scope as the one that opens the modal (notice the $scope being passed into the modal)
$scope.setLanguage = function() {
alert('test');
}
Can anyone suggest what I might be doing wrong here? This looks like a bug in Ionic but I could be wrong.
Thanks
It turns out it WAS working, but the alert wasn't being shown... I suspect this is because it was within a modal? I don't know.
Anyway, there's nothing wrong with the above code after all.
I am new to AngularJS and have to incorporate an Admin LTE full calendar feature in my webapp. I found an Angular directive for the Arshaw FullCalendar JQuery plugin. The link to the directive is here: http://angular-ui.github.io/ui-calendar/
Although I am able to display the calendar, I am not able to get the previous, today and next feature working for the calendar. This help to toggle between the months of the calendar. I know this feature is inside the uiConfig but I am not able to understand why this feature doesn't get rendered.
Below is my code. I have included all the files necessary for the plugin but did not show in index.html.
index.html
<div class="col-xs-12" resize>
<h1>Calendar Page</h1>
<div class="calendar" ng-model="testevents" config="uiConfig.calendar" ui-calendar="{{uiConfig.calendar}}"></div>
calendarController.js
app.controller("calendarController", ["$scope", "displayCalendar", "dialogs", "$filter", function ($scope, displayCalendar, dialogs, $filter) {
$scope.$parent.pageTitle = "Displays Reporting Period Start and End Dates";
/* config object */
$scope.uiConfig = {
calendar: {
height: 450,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender
}
};
$scope.form = {};
$scope.testevents = {
events: [
{
title: 'event1',
start: '2015-12-12'
},
{
title: 'event2',
start: '2015-12-11'
}
// etc...
],
color: 'yellow', // an option!
textcolor: 'black' // an option!
};
}]);
UPDATE:
looking at the demo code on their github page
<div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
I think you would need to change yours to:
<div class="calendar" ng-model="testevents" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
here is the .html page for their demo
https://github.com/angular-ui/ui-calendar/blob/master/demo/index.html
Have you also added the ui-calendar component to the app initialisation?
'var myAppModule = angular.module('myApp', []);'
inside the [] normally you have to inject a third party component so it can be seen by the rest of your controllers.
Ok.. So after hours and hours of debugging, I figured out what the issue was.
I included fullcalendar.print.css also which was throwing off the styling for fullcalendar.css.
So an advice peeps, if the buttons are not getting rendered properly u might need to consider checking the CSS and remove fullcalendar.print.css.
I'm new to AngularJS, but have run into a problem with my Ionic app. On one of my views I'm using ng-repeat to show the values from a pouchDB. However, it only works the first time I view it. If I navigate away from the view and then back it is just blank. I believe I have identified the problem to be part of the code in my controller.
My view:
<ion-view title="All">
<ion-content padding="true">
<div class="list" ng-controller="MyController">
<div class="item item-button-right" ng-repeat="name in names">
{{name.name}}
<button class="button button-clear button-assertive" ng-click="addFav(name.name)">
<i class="icon ion-ios-heart-outline"></i>
</button>
</div>
</div>
</ion-content>
</ion-view>
My Controller:
app.controller("MyController", function($scope, $ionicPopup, PouchDBListener) {
$scope.names = [];
$scope.addFav = function(favName) {
$ionicPopup.alert({
title: 'Favorite',
template: favName + ' has been added',
okText: 'OK'
})
}
$scope.$on('add', function(event, name) {
$scope.names.push(name);
});
});
It seems that the $scope.$on is only run on the first view and thereby causing the view to be blank. Being new, I got the above code from a tutorial and therefore don't really have any ideas on what is causing it or how to fix it?
UPDATE:
I have a broadcast in my factory that syncs my DB:
app.factory('PouchDBListener', ['$rootScope', function($rootScope) {
localDB.changes({
continuous: true,
onChange: function(change) {
if (!change.deleted) {
$rootScope.$apply(function() {
localDB.get(change.id, function(err, doc) {
$rootScope.$apply(function() {
if (err) console.log(err);
$rootScope.$broadcast('add', doc);
})
});
})
} else {
$rootScope.$apply(function() {
$rootScope.$broadcast('delete', change.id);
});
}
}
});
return true;
}]);
Do I need a broadcast in my controller as well?
Initially $scope.names = [];
$scope.$on is an event listener, so there should be $scope.$emit or $scope.$broadcast in order to load your array.
So while loading first time some event occurs through $scope.$emit or $scope.$broadcast and it is listened with $scope.$on, so your array gets loaded.
I think its not happening again when your switch views and come back.
please see last comment for explanation
I just altered your plunker
http://embed.plnkr.co/CZuqLzkU0wd0Soskvi2j/preview
Hope this helps !!!!!!
I am getting this error that 'announcementCtrl' is not a function? Can someone please tell me what I am doing wrong here. It clearly is defined so what's happening?
This is my javascript:
(function() {
var app = angular.module('announcementApp', []);
app.controller('announcementCtrl', function() {
this.announcements = announcementsArray;
});
var announcementsArray = [
{
type: 'UPDATE',
announcement: 'DISA Maps are almost complete! Look foward to reporting out at the project share next week.'
},
{
type: 'SHOUT-OUT',
announcement: 'Great work to Lawson and Patrick on Innovation Cell. We are gaining more strategic position and proving our value everyday.'
},
{
type: 'EVENT',
announcement: 'Dr. Chipley will be visiting 3/20/2015 to talk Cybersecurity'
}
];
})();
This is my HTML:
<div class="row row2" ng-app="announcementApp">
<section class="sub-box client-box">
<div class="announcements" ng-controller="announcementCtrl as announcements">
<div class="announcement-block" ng-repeat="eachAnnouncement in announcements">
<div class="event-highlight update"></div>
<div class="wrap">
<div class="announcement-description">{{eachAnnouncement.type}}</div>
<div class="announcement">{{eachAnnouncement.announcement}}</div>
</div>
</div>
</div>
</section>
</div>
Try to use $scope to save your values:
app.controller('announcementCtrl', function($scope) {
$scope.announcements = announcementsArray;
});
After i did that i receive the same error only when i comment my controller definition at all.
Also, clear cache of your browser.
Demo: http://plnkr.co/edit/oHHEtRgLpVbEcbao5U9o?p=preview
It looks like you mixed up the controllers 'handle' and the property you want to access. Since you are not injecting $scope ng-controller="announcementCtrl as announcements" declares announcements as a kind of 'handler' for this. Inside your controller you declare this.announcements to be your array. So it should be ng-repeat="eachAnnouncement in announcements.announcements" (first announcements = this in your controller, second = the array)
Look at the code example in the documentation: AngularJS: ngController
Edit: Maybe the answer was a bit confusing, but it works allright: Fiddle
I renamed your controller handle to 'ctrl' to make it more clear what was changed.
Currently i'm developing a webapp with AngularJS for a giant company, and i'm trying to have a simple FAQ inside a modal.
In my localhost the FAQ it's working just fine (very similar to the original FAQ in angular documentation), but when i write exactly the same code inside a modal i'm getting a console error:
TypeError: Object [object Object] has no method 'addGroup'
Important to state that inside the modal my $scope.oneAtATime = true; it's being ignored, so basically even if i force it to be true
<accordion close-others="true">
It's always false.
This addGroup method is on the AngularJS library code.
Any ideas?
The HTML:
<div class="modal__container__body">
<div id="faq_accordion" ng-controller="AccordionController">
<accordion close-others="true">
<accordion-group heading="{{faq.title}}" ng-repeat="faq in faqs">
{{faq.content}}
</accordion-group>
</accordion>
</div>
</div>
The controller
lobby.controller("AccordionController", ["$scope", function ($scope) {
$scope.oneAtATime = true;
$scope.faqs = [
{
title: "Q1?",
content: "A1"
},
{
title: "Q2?",
content: "A2"
},
{
title: "Q3?",
content: "A3"
},
{
title: "Q4?",
content: "A4"
}
];
}]);
Please notice that in the above code i'm forcing close-others to be true, directly in the html tab.
Help?
We had the same problem recently, change
<div id="faq_accordion" ng-controller="AccordionController">
to
<div id="faq_accordion" ng-controller="MyAccordionController">
That should fix it. You basically overwrote the plugin controller with your own. Don't forget to change the controller definition also, it's the part that's breaking it.