I am a beginner in Angularjs and working on some else project.
how can I get data of $scope.selAppt from bookingToolCtrl into reasonDialogCtrl?
(function () {
app = angular.module('bookingToolApp', ['ngSanitize', 'ui.bootstrap', 'isteven-multi-select', 'angucomplete-alt', 'ngTable', 'dialogs.main', 'ngMap', 'BookingToolServices', 'BookingToolDirectives']);
app.run(['$templateCache', function ($templateCache) {
$templateCache.put('/dialogs/reason.html', '<div class="modal-header"> <h4 class="modal-title"><span class="glyphicon glyphicon-calendar"></span> Reserve Service {{selAppt.selected.eventid}}</h4></div><div class="modal-body"><ng-form name="nameDialog" novalidate role="form"><div class="form-group input-group-lg" ng-class="{true: \'has-error\'}[nameDialog.username.$dirty && nameDialog.username.$invalid]"> <label class="control-label" for="course">Reason:</label> <input type="text" class="form-control" name="reason" id="reason" ng-model="reason" ng-keyup="hitEnter($event)" required> <span class="help-block">Enter the reason for reserving this service.</span></div></ng-form></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button><button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(nameDialog.$dirty && nameDialog.$invalid) || nameDialog.$pristine">Submit</button></div>');
}]);
app.controller('bookingToolCtrl', ['$scope', 'dataService', '$sce', 'NgTableParams', '$filter', '$compile', '$rootScope', 'loadingEventService', 'claimantLatLngEventService', 'dialogs', '$timeout', 'ngTableEventsChannel', function ($scope, dataService, $sce, NgTableParams, $filter, $compile, $rootScope, loadingEventService, claimantLatLngEventService, dialogs, $timeout, ngTableEventsChannel) {
$scope.selAppt = {"selected": false};
}]);
app.controller('reasonDialogCtrl', function ($scope, $modalInstance, data) {
});
})();
I tried the following but it doesn’t work:
app.controller('reasonDialogCtrl', ['$scope', '$modalInstance', 'data', 'dataService', '$controller','$rootScope', function ($scope, $modalInstance, data, dataService, $controller,$rootScope) {
//-- Variables --//
$scope.data = dataService.data;
$scope.service = dataService;
var testCtrl1ViewModel = $controller('bookingToolCtrl');
alert(testCtrl1ViewModel.selAppt);
}]);
$scope.selAppt get values when I select an appointment.
In bookingToolCtrl
$scope.selAppt = {"selected": false};
dataService.data = $scope.selAppt //... you missed this
and in reasonDialogCtrl
$scope.data = dataService.data;
Related
controller.js
var app = angular.module('myApp', ['ionic']).controller('AppCtrl', function($scope, $http, $ionicSideMenuDelegate, $ionicPopup, $ionicListDelegate, $ionicModal, $window, $timeout, $rootScope) {
$rootScope.studlist = [];
$http.get("../services/student_list.php").then(function(response) {
if (response.data != null) {
$scope.studlist = response.data;
console.log($scope.studlist)
}
})
});
html view
<ion-list class="available-scroller" style="margin-top:200px">
<h2>{{studlist.length}}</h2>
<ion-item ng-repeat="slist in studlist track by $index" style="margin-top:30px">
<div class="card padding" style="background-color: rgb(204, 238, 255)" ng-if="studlist.length>0">
<p>StudentID : {{slist.stud_id}}</p>
<p>Name : {{slist.firstname+ " "+slist.lastname}}</p>
<p>Gender : {{slist.gender}}</p>
<p>MobileNo : {{slist.mobileno}}</p>
<p>Course : {{slist.course}}</p>
<p>Semester : {{slist.semester}}</p>
<p>Username : {{slist.username}}</p>
<p>
<button class="button button-assertive button-small icon ion-android-delete" ng-click="delete(slist.stud_id)"></button>
<button class="button button-assertive button-small icon ion-android-create" ng-click="openModal(slist.stud_id)"></button>
</p>
</ion-item>
</ion-list>
You can use
$timeout
Example
var app = angular.module('myApp', ['ionic']).controller('AppCtrl', function($scope, $http, $ionicSideMenuDelegate, $ionicPopup, $ionicListDelegate, $ionicModal, $window, $timeout, $rootScope) {
$rootScope.studlist = [];
var getStudentsList= function() {
$http.get("../services/student_list.php").then(function(response) {
if (response.data != null) {
$scope.studlist = response.data;
console.log($scope.studlist)
}
})
$timeout(getStudentsList, 5000);
}
});
I have an angular app that shows a modal dialog and I cannot get the controllerAs functionality to work. Here is my app definition:
var deps = ['ngResource', 'ngRoute', 'swaggerUi', 'http-auth-interceptor', 'ngAnimate', 'angular-spinkit', 'ui.bootstrap'];
var myapp = angular.module('myApp', deps);
Here is my controller that invokes the modal and the controller bound to the modal
myapp.controller('UsersController', ['$scope', '$log', '$uibModal', 'UsersService', function ($scope, $log, $uibModal, UsersService) {
$scope.users = UsersService.getAll();
$scope.openAddUserModal = function () {
$uibModal.open({
animation: false,
templateUrl: 'partials/addUserModal.html',
/* I've even tried controller:'AddUserModalCtrl as addUserModalCtrl' */
controller: 'AddUserModalCtrl',
controllerAs: 'addUserModalCtrl',
bindToController: true
});
};
}]).controller('AddUserModalCtrl', ['$scope', '$log', '$uibModalInstance', function ($scope, $log, $uibModalInstance) {
$scope.cancel = function () {
console.log('userToAdd: ' + JSON.stringify($scope.userToAdd));
$uibModalInstance.dismiss('cancel');
};
$scope.addUser = function () {
console.log($scope.username);
}
}])
And here is the modal html:
<div class="modal-header">
<h3 class="modal-title">Add new user</h3>
</div>
<div class="modal-body">
<form role="form">
<button ng-click="addUser()" type="submit" class="btn btn-default">Submit</button>
<!-- this works if I remove the 'addUserModalCtrl' -->
<button ng-click="addUserModalCtrl.cancel()" type="submit" class="btn btn-default">Cancel</button>
</form>
</div>
It's because you are adding the methods to $scope. You don't do that when using controllerAs syntax. You should use this. notation for your functions in AddUserModalCtrl.
this.cancel = function () {
console.log('userToAdd: ' + JSON.stringify(this.userToAdd));
$uibModalInstance.dismiss('cancel');
};
this.addUser = function () {
console.log(this.username);
}
I have this md-dialog which has an input. I'm passing the model of the input when I click the top up button but on my controller, it is undefined.
<md-dialog aria-label="Top Up User" ng-cloak>
<md-dialog-content>
<div class="md-dialog-content">
<form>
<md-input-container class="md-block">
<label>Amount</label>
<input required type="number" name="amount" ng-model="topup.amount" min="1"
ng-pattern="/^1234$/" />
</md-input-container>
<md-dialog-actions layout="row" ng-show="!vm.loading">
<md-button ng-click="vm.closeDialog()">
Cancel
</md-button>
<md-button ng-click="vm.topUp(topup.amount)" style="margin-right:20px;">
Top Up
</md-button>
</md-dialog-actions>
<div layout="row" layout-align="space-around">
<md-progress-circular md-mode="indeterminate" ng-show="vm.loading"></md-progress-circular>
</div>
</form>
</div>
</md-dialog-content>
</md-dialog>
Controller:
(function(){
angular
.module('app')
.controller('MainController', [
'navService', '$mdSidenav', '$mdDialog', '$log', '$q', '$state', '$mdToast', 'Pubnub', 'mongolabService', '$scope',
MainController
]);
function MainController(navService, $mdSidenav, $mdDialog, $log, $q, $state, $mdToast, Pubnub, mongolabService, $scope) {
var vm = this;
function showActions($event) {
var self = this;
$mdDialog.show({
controller: [ '$mdDialog', TopUpController],
controllerAs: 'vm',
templateUrl: 'app/views/partials/topup.html',
targetEvent: $event,
bindToController : true,
clickOutsideToClose:true
});
function TopUpController () {
var vm = this;
vm.topUp = topUp;
vm.loading = false;
vm.closeDialog = closeDialog;
function closeDialog() {
$mdDialog.hide();
}
function querySearch (query) {
return query ? $scope.users.filter( createFilterFor(query) ) : $scope.users;
}
function topUp(amount) {
var topUpCallback = {
error: function(response){
vm.loading = false;
showSimpleToast("Error occurred");
console.log(response);
}, success: function(response){
showSimpleToast("Top up success");
}
}
//Amount is undefined
showSimpleToast("amount: " + amount);
}
}
}
function showSimpleToast(title) {
$mdToast.show(
$mdToast.simple()
.content(title)
.hideDelay(2000)
.position('bottom right')
);
}
}
})();
Its strange. change
showSimpleToast("amount: " + amount);
to
showSimpleToast("amount: " + vm.amount);
and let see what happens
Can you change the way you're using topup property like this (just for 1 style coding vm/$scope):
In input
<input required type="number" name="amount" ng-model="vm.topup.amount" min="1" ...
In button:
<md-button ng-click="vm.topUp(topup.amount)" style="margin-right:20px;">
And init topup object in your controller:
vm.topup = {amount: ''};
I think the problem is you didn't init your topup object before use its amount property
I noticed that the amount is just getting undefined when I type on the input. I added allowInvalid to the <input> and it worked.
ng-model-options="{allowInvalid: true}"
I am using basic angular.js concept to show and hide a div. For some reasons I am unable to make it work.
While Uploading a file I am showing a div 'myFormSpinner' on the basis of registerStart value. I am creating a phone gap app.
Could someone please help me in finding the issue. Apart from showing/hiding div everything works fine. Below is the code snippet:
<div class="row" ng-controller="RegisterCtrl">
<div id="myFormSpinner" ng-show="registerStart">
<img src="img/ajax-loader.gif">
</div>
<div class="col-md-8">
<form class="ng-pristine ng-invalid ng-invalid-required" style="margin-top:5%;">
<div class="col-md-6">
<input class="form-control " type="text" ng-model="registerData.Email" id="Email" name="Email" required placeholder="Email">
</div>
<div class="col-md-offset-1 col-md-10 ">
<input type="submit" ng-click="register()" value="Register" class="btn btn-default btn-primary">
</div>
</form>
</div>
event.controller('RegisterCtrl', ['$scope', '$state', '$q', '$http', 'eventService', 'authService', '$stateParams', '$rootScope', 'tokenService', 'imageService', 'spinnerService', 'appBackgroundService',
function ($scope, $state, $q, $http, eventService, authService, $stateParams, $rootScope, tokenService, imageService, spinnerService, appBackgroundService) {
var userNumber = 0;
$scope.mediaUploadStart = false;
$scope.eventId = $state.params.id;
$scope.register = function () {
$scope.registerStart = true;
console.log('scope.Pic=' + $scope.pic);
if ($scope.registerData.Email) {
spinnerService.show('myFormSpinner');
$scope.mediaUploadStart = true;
var paramOptions = {
eventId: $state.params.id,
email: $scope.registerData.Email,
fb: {},
number: userNumber,
provider: "Form"
};
uploadPicAndData(paramOptions).then(function (result) {
var data = JSON.parse(result);
$scope.registerStart = false;
appBackgroundService.disableBackgroundMode();
},
function (error) {
spinnerService.hide('myFormSpinner');
$scope.registerStart = false;
appBackgroundService.disableBackgroundMode();
});
$scope.mediaUploadStart = false;
spinnerService.hide('myFormSpinner');
}
};
}])
You are setting the $scope element in an async mode.
the digest cycle is not able to determine that a change has been made to the scope element in an async mode.
You should use $apply to activate the digest cycle.
$scope.$apply(function () { $scope.registerStart = false; });
Read more about $apply here: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
I'm trying to implement a modal window in Angular to prompt a user for an input, I've used almost the same code in a previous app and it worked, I really don't know what is going on here...
Here is the controller that opens the modal (in Coffee Script):
.controller('addStreamModal', [
'$scope', '$modal', '$log', '$http', '$rootScope'
($scope, $modal, $log, $http, $rootScope) ->
$scope.open = ->
modalInstance = $modal.open(
templateUrl: "addStream.html"
controller: 'addStreamModalInstance'
resolve:
public_key: ->
"placeholder"
)
modalInstance.result.then ((result) ->
return
), ->
$log.info "Modal dismissed at: " + new Date()
return
return
return
])
Now the modal instance controller:
.controller('addStreamModalInstance', [
'$scope', '$modalInstance', '$http', 'public_key'
($scope, $modalInstance, $http, public_key) ->
console.log(public_key)
$scope.public_key = public_key
$scope.ok = ->
console.log($scope.public_key)
$modalInstance.close $scope
return
$scope.cancel = ->
$modalInstance.dismiss "cancel"
return
return
])
And the HTML:
<div class="modal-header">
<h4>Please enter the private key for verification {{public_key}}</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" id="exampleInputEmail1" ng-model="public_key">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
So I click a button and the Modal opens with "placeholder" in the text box, I can also see this test bound to the modal title. As I endit text in the box, the title continues to update as expected due to binding, however when I click ok, it seems like the $scope.public_key reverts back to "placeholder". Trying to figure out why.
When you set the value in your addStreamModalInstance controller you are working within a different scope than addStreamModal. To update addStreamModal's scope with the value set in addStreamModalInstance you can return the selected value (you are doing this by returning $scope) and assign it in the .then invocation of your addStreamModal controller.
Your addStreamModal would become something like (sorry, my coffeescript is not great):
.controller('addStreamModal', [
'$scope', '$modal', '$log', '$http', '$rootScope'
($scope, $modal, $log, $http, $rootScope) ->
$scope.modalTitle = "placeholder" //defaults this value to placeholder
$scope.open = ->
modalInstance = $modal.open(
templateUrl: "addStream.html"
controller: 'addStreamModalInstance'
resolve:
public_key: ->
$scope.modalTitle
)
modalInstance.result.then ((modalScope) ->
$scope.modalTitle = modalScope.public_key //updates the default value with the value from the modal
return
), ->
$log.info "Modal dismissed at: " + new Date()
return
return
return
])
Ok I have it working now, I went back to the angular example, tested it then slowly adapted it to my needs, heres the code:
.controller "addStreamModal", ($scope, $modal, $http, $log) ->
$scope.public_key = ""
$scope.open = ->
modalInstance = $modal.open(
templateUrl: "addStream.html"
controller: "addStreamModalInstance"
resolve:
public_key: ->
$scope.public_key
)
modalInstance.result.then ((public_key) ->
console.log(public_key)
return
), ->
$log.info "Modal dismissed at: " + new Date()
return
return
return
And the instance:
.controller "addStreamModalInstance", ($scope, $modalInstance, public_key) ->
$scope.editable = public_key: public_key
$scope.ok = ->
$modalInstance.close $scope.editable.public_key
return
$scope.cancel = ->
$modalInstance.dismiss "cancel"
return
return
HTML:
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<input type="text" name="input" class="form-control" ng-model="editable.public_key">
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
So I think the difference is that I nest the public key into the .editable object in the instance controller. I don't exactly understand why this works but it does and I'm happy about that.