I am new in Ionic and angularjs. I am trying to fetch login (ng-model) data (email&password) from signin.html page, and calling API with POST method.But it doesn't call api. I spent couple of days for this. Please help me!
html
<ion-view view-title="login">
<ion-component>
</br>
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="First Name" ng-model="login.firstname">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="login.password">
</label>
<label class="item item-input">
<input type="text" placeholder="E-mail" ng-model="login.email">
</label>
<button class="button button-block button-balanced" data-ng-click="submit(login)">
Login
</button>
<button class="button icon-left button-block ion-social-facebook button-positive">Login Facebook</button>
<button class="button icon-left button-block ion-social-googleplus button-assertive">Login Google+</button>
<a ng-href="#/signup"><button class="button button-clear button-positive">SignUp
</button></a>
</div>
</ion-component>
</ion-view>
app.js
var app=angular.module('starter', ['ionic','ngCordova'])
app.controller('loginCtrl', function($scope,$http){
$scope.data=[];
// $scope.logindata = {};
// console.log (login);
$scope.login={};
//****login submit****
$scope.submit=function(login){
console.log(login);
$scope.logincontet=console.log('logindata:'+login);
//***api call***
var local1='json={"method_name":"login","body":{"login_with":"2","facebook_id":"","email":';
var local2=',"name":"",';
var local3='"password":';
var local4='}}';
var req =
{
method: 'POST',
url: "http://192.168.1.23/projects/veterinary/webservice/main.php",
//data: 'json={"method_name":"login","body":{"login_with":"2","facebook_id":"","email":"$scope.login.email","name":"","password":"$scope.login.password"}}',
data:local1 + $scope.login.email + local2 + local3 + $scope.login.password +local4,
headers: {"Content-Type": "application/x-www-form-urlencoded"}
};
$http(req).success(function(data, status, headers, config)
{
console.log('Success',data);
$scope.data=data.data;
//success
})
.error(function(data, status, headers, config)
{
console.log('Error');
});//error
//*********
window.location.href = "#/success.html";
}
//*****
//****login api call****
});
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: 'loginCtrl'
})
.state('signup', {
url: "/signup",
templateUrl: "templates/signup.html",
controller: 'signupCtrl'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
*********************
Binding view and controller!
Finally I created post api string with this...
data: 'json={"method_name":"login","body":{"login_with":"2","facebook_id":"","email":"'+$scope.login.email+'" ,"name":"","password":"'+$scope.login.password+'"}}',
I need to implement modal window for my application but I am not able to do it, I saw multiple examples on net for the same but still, not able to get it proper in my application. I tried to replicate this plunker example in my application http://plnkr.co/edit/M35rpChHYThHLk17g9zU?p=preview
I am getting $modal.open() problem is javascript console as it is not able to read property "Cannot read property 'open' of undefined
at Scope.open"
Below is my code for the same.
app.js
(function() {
var app = angular.module('app', ['ui.bootstrap', 'ngFileUpload', 'bootstrap.fileField','angularUtils.directives.dirPagination','ui.router','ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/newMember', {
templateUrl: 'resources/templates/onBoard.jsp',
controller: 'onBoardCtrl'
})
.when('/toBeInitiated', {
templateUrl: 'resources/templates/toBeInitiated.jsp',
controller: 'tobeinitiatedCtrl'
})
.when('/initiated', {
templateUrl: 'resources/templates/initiated.jsp',
controller: 'initiatedCtrl'
})
.when('/pending', {
templateUrl: 'resources/templates/pendingWithFadv.jsp',
controller: 'pendingFadvCtrl'
})
.when('/inProgress', {
templateUrl: 'resources/templates/inProgress.jsp',
controller: 'inProgressCtrl'
})
.when('/completed', {
templateUrl: 'resources/templates/completed.jsp',
controller: 'completedCtrl'
})
.when('/accessList', {
templateUrl: 'resources/templates/accessList.jsp',
controller: ''
})
.when('/dataUpload', {
templateUrl: 'resources/templates/dataUpload.jsp',
controller: ''
})
.otherwise({redirectTo: '/'});
}]);
app.controller('uploadTestCtrl1',['$scope','$http',function($scope, $http){
$scope.loading = true;
$scope.doUpload = function(){
//console.log('title',$scope.title);
$scope.loading = true;
var file1 = $scope.uploadFile
//var file = $scope.myFile
console.log('uploadFile',$scope.uploadFile);
//console.log('uploadFile',$scope.myFile);
//alert('Upload Initiated');
//create form data object
var fd = new FormData();
//var file =$scope.myFile;
//console.log('file is ' + JSON.stringify(file));
fd.append('title',$scope.title);
fd.append('file', file1);
//console.dir(fd);
//send the file / data to your server
$http.post('continueFileUpload', fd, {
withCredentials : false,
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(data){
$scope.loading = false;
//do something on success
console.log("success");
alert("Data Saved Successfully");
}).error(function(data, status, headers, config){
//do something on error
$scope.loading = false;
alert(data.message);
console.log("failed");
})
}
}]);
app.controller('uploadTestCtrl',['$scope','$http',function($scope, $http){
$scope.doUpload = function(){
//console.log('title',$scope.title);
var file1 = $scope.uploadFile
//var file = $scope.myFile
console.log('uploadFile',$scope.uploadFile);
//console.log('uploadFile',$scope.myFile);
//alert('Upload Initiated');
//create form data object
var fd = new FormData();
//var file =$scope.myFile;
//console.log('file is ' + JSON.stringify(file));
fd.append('title',$scope.title);
fd.append('file', file1);
//console.dir(fd);
//send the file / data to your server
$http.post('continueFileUpload1', fd, {
withCredentials : false,
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(data){
//do something on success
console.log("success");
alert("Data Saved Successfully");
}).error(function(data, status, headers, config){
//do something on error
alert(data.message);
console.log("failed");
})
}
}]);
app.controller('AppController',function ($scope) {
$scope.name = "Admin";
});
app.controller('onBoardCtrl',['$scope','$http',function($scope, $http){
$scope.empList = [];
$scope.addemp = {};
$scope.createFailed=false;
$scope.saveEmp = function(){
$scope.empList.push($scope.addemp);
$http({
url: 'onBoardSubmit',
method: "POST",
data: JSON.stringify({empId: $scope.addemp.empId, empName: $scope.addemp.empName, empEmail: $scope.addemp.empEmail, empProgramName: $scope.addemp.empProgramName}),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.createFailed=false;
alert("Data Saved Successfully");
$scope.reset();
}).error(function (data, status, headers, config) {
console.log("failed");
$scope.createFailed=true;
$scope.error=data.message;
alert(data.message);
});
};
$scope.reset = function() {
$scope.addemp = {};
$scope.onboardform.$setPristine();
}
}]);
app.controller('tobeinitiatedCtrl',['$scope','$http',function($scope, $http,$modal){
$scope.initiate=[];
$scope.names=[];
$scope.action='initiate';
//alert("tobeinitiated");
$scope.toBeInitiatedOnLoad = function(){
$scope.loading = true;
//alert($scope.id);
$http({
url: 'toBeInitiated',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.loading = false;
//$scope.initiate = angular.copy(data);
//$scope.initiate.push(data);
$scope.names=data;
//$scope.initiate = angular.copy($scope.names);
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
$scope.toggleSelection=function toggleSelection(x,conf,initiate,initiatedFor){
alert("change");
//$scope.initiate=[];
var idx = $scope.names.indexOf(initiatedFor);
alert(idx);
if (conf)
{
$scope.initiate.push(x);
//alert($scope.initiate[0].empName);
}
else
{
//var idx1 = initiate.indexOf(x.initiatedFor);
for (var i=0;i<initiate.length;i++)
{
if (angular.equals(initiate[i],x))
initiate.splice(i,1);
}
//alert("false");
}
};
$scope.open = function open () {
alert("Hi");
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl
});
};
$scope.resendIntitate = function(){
//$scope.name={};
var index = 0;
$scope.initiate.forEach(function (name) {
console.log('rows #' + (index++) + ': ' + JSON.stringify(name));
});
/*var data ={
initiatedFor : $scope.name.initiatedFor
}*/
alert(JSON.stringify($scope.initiate));
//alert(JSON.stringify($scope.initiate));
$http({
url: 'fromInitiated',
method: "POST",
data:JSON.stringify($scope.initiate),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
//$scope.loading = false;
//$scope.initiate = angular.copy(data);
//$scope.initiate.push(data);
//$scope.names=data;
//$scope.initiate = angular.copy($scope.names);
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);;
app.controller('ModalInstanceCtrl',function ($scope, $uibModalInstance, items) {
});
app.controller('initiatedCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.initiatedOnLoad = function(){
$http({
url: 'initiated',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('pendingFadvCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.pendingFadvOnLoad = function(){
$http({
url: 'pendingWithFadv',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('inProgressCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.inProgressOnLoad = function(){
$http({
url: 'inProgress',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('completedCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.completedOnLoad = function(){
$http({
url: 'completed',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('TableData', function($scope, $http) {
$http.get("table_data.json")
.success(function (response) {
$scope.names = response.records;
for (var i=0; i<$scope.names.length; i++){
$scope.names[i].ReqDateParsed = new Date($scope.names[i].ReqDate);
$scope.names[i].InitDateParsed = new Date($scope.names[i].InitDate);
$scope.names[i].CompDateParsed = new Date($scope.names[i].CompDate);
$scope.names[i].DbDateParsed = new Date($scope.names[i].DbDate);
}
$scope.sortType = 'EmpName';
$scope.sortReverse = false;
});
});
app.controller('TabController', function(){
this.tab = 1;
this.setTab = function(newValue){
this.tab = newValue;
};
this.isSet = function(tabName){
return this.tab === tabName;
};
this.content = details;
});
app.directive('toBeInitiated', function(){
return{
restrict: 'E',
templateUrl: 'toBe-Initiated.html'
};
});
var details = [
{
description: "Description1",
accessCount: 2,
greenCount: 3,
orangeCount: 2
}
];
app.factory('Excel',function($window){
var uri='data:application/vnd.ms-excel;base64,',
template='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));},
format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];})};
return {
tableToExcel:function(tableId,worksheetName){
var table=$(tableId),
ctx={worksheet:worksheetName,table:table.html()},
href=uri+base64(format(template,ctx));
return href;
}
};
})
.controller('MyCtrl',function(Excel,$timeout){
$scope.exportToExcel=function(tableId){ // ex: '#my-table'
$scope.exportHref=Excel.tableToExcel(tableId,'sheet name');
$timeout(function(){location.href=exportHref;},100); // trigger download
}
});
})();
toBeInitiated.jsp
<!-- <div img src="resources/images/spinner.jpg" ng-show='loading'> -->
<div class="col-md-1" > </div>
<div class="col-md-10">
<!-- <input type="button" id="btnExport" value=" Export Table data into Excel " onclick="exportToExcel()" /> -->
<!-- <button type="submit" class="btn btn-primary" id="btnExport" onclick="exportToExcel()">Export to Excel</button> -->
<!-- <button class="btn btn-link" id="btnExport" > --> <!-- ng-click="exportToExcel('#toBeInitiatedData')"> -->
</span> Export to Excel
<!-- </button> -->
<div class="data" id="toBeInitiatedData" data-ng-controller="tobeinitiatedCtrl" data-ng-init="toBeInitiatedOnLoad()">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
test
</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>
</script>
<table class="table table-hover table-condensed">
<thead>
<tr>
<!-- <th>S.No.</th> -->
<!-- <th>Employee ID</th> -->
<th>
<a href="#" ng-click="sortType = 'EmpId'; sortReverse = !sortReverse" ng-model="initiatedFor">
Employee ID
<span ng-show="sortType == 'EmpId' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'EmpId' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<!-- <th>Employee Name</th> -->
<th>
<a href="#" ng-click="sortType = 'EmpName'; sortReverse = !sortReverse" ng-model="empName">
Employee Name
<span ng-show="sortType == 'EmpName' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'EmpName' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<!-- <th>Requested By</th> -->
<th>
<a href="#" ng-click="sortType = 'ReqBy'; sortReverse = !sortReverse" ng-model="initiatedBy">
Requested By
<span ng-show="sortType == 'ReqBy' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ReqBy' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'ReqDateParsed'; sortReverse = !sortReverse" ng-model="requestedDate">
Requested Date
<span ng-show="sortType == 'ReqDateParsed' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ReqDateParsed' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>Review Data</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="x in names | orderBy:sortType:sortReverse | filter:query | itemsPerPage:10">
<!-- <td>{{x.SNo}}</td> -->
<td>{{x.initiatedFor}}</td>
<td>{{x.empName}}</td>
<td>{{x.initiatedBy}}</td>
<td>{{x.requestedDate | date: 'dd-MMM-yyyy'}}</td>
<td><button type="button" class="btn btn-link" ng-click="open()">View {{x.initiatedFor}}</button></td>
<td>
<select name="action" class="selectContainer actionSelect form-control" ng-model= "action"title="Select 1 action" width="50px">
<option value="resend">Resend</option>
<option value="initiate">Initiate</option>
</select>
</td>
<td><input type="checkbox" ng-model="confirmed" ng-click="toggleSelection(x,confirmed,initiate,initiatedFor)" value="{{x}}" /></td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true"></dir-pagination-controls>
<button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button>
</div>
<div>
<!-- <button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button> -->
</div>
</div>
<div class="col-md-1"> </div>
<!-- </div> --
home.jsp
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>
<head>
<title>Background Check App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body ng-app="app" ng-controller="TabController as tab">
<div class="container-fluid" ng-controller="TableData">
<div class="row jumbotron" ng-controller="AppController" ng-include="'resources/templates/header.jsp'"></div>
<!-- <div class="row" ng-include="'templates/navigation.html'"></div> -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-7 tab" ng-include="'resources/templates/navigation.jsp'"></div>
<div class="col-md-1"></div>
<div class="col-md-3">
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q" ng-model="query">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<!-- <button class="close">×</button> -->
</form>
</div>
</div>
<hr>
<div class="row" id="home" ng-show="tab.isSet(1)" ng-include="'resources/templates/homeData.jsp'"></div>
<!-- <toBe-Initiated ng-show="tab.isSet(2)"></toBe-Initiated> -->
<!-- <div class="row" ng-show="tab.isSet(2)" id="toBeInitiated" ng-include="'resources/templates/toBeInitiated.jsp'"></div> -->
<!-- <div class="row" ng-show="tab.isSet(3)" id="initiated" ng-include="'resources/templates/initiated.jsp'"></div>
<div class="row" ng-show="tab.isSet(4)" id="pending" ng-include="'resources/templates/pendingWithFadv.jsp'"></div>
<div class="row" ng-show="tab.isSet(5)" id="inProgress" ng-include="'resources/templates/inProgress.jsp'"></div>
<div class="row" ng-show="tab.isSet(6)" id="completed" ng-include="'resources/templates/completed.jsp'"></div>
<div class="row" ng-show="tab.isSet(7)" id="accessList" ng-include="'resources/templates/accessList.jsp'"></div>
<div class="row upload" ng-show="tab.isSet(8)" id="dataUpload" ng-include="'resources/templates/dataUpload.jsp'"></div>
<div class="row" ng-show="tab.isSet(9)" id="newMember" ng-include="'resources/templates/onBoard.jsp'"></div> -->
<div class="footer"></div>
</div>
<div ng-view></div>
<!--scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="resources/angular/angular.js"></script>
<!-- <script src="resources/angular/ui-bootstrap-tpls.js"></script> -->
<!-- <script src="resources/angular/ui-bootstrap.js"</script> -->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.0.js"</script>
<script src="http://urigo.github.io/angular-spinkit/javascripts/angular-spinkit.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="resources/angular/bootstrap-table-angular.js"></script>
<script src="resources/angular/bootstrap-table-all.js"></script>
<script src="resources/scripts/app.js"></script>
<script src="resources/scripts/loginValidate.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="resources/angular/angular-bootstrap-file-field.js"></script>
<!-- <script src="js/app.js"></script> -->
<!-- <script src="silviomoreto-bootstrap-select-a8ed49e/dist/js/bootstrap-select.js"></script> -->
<!-- <script src="https://code.jquery.com/jquery.js"></script> -->
<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="resources/angular/ng-file-upload/ng-file-upload-shim.js"></script> <!-- for no html5 browsers support -->
<script src="resources/angular/ng-file-upload/ng-file-upload.js"></script>
<script src='resources/angular/angular-upload.min.js'></script>
<script src="resources/angular/dirPagination.js"></script>
<script src="resources/angular/angular-route.js"></script>
<!--scripts -->
</body>
</html>
app.controller('tobeinitiatedCtrl',['$scope','$http',function($scope, $http,$modal){
you do not inject $modal hence $modal will be undefined.
try this instead:
app.controller('tobeinitiatedCtrl',['$scope','$http','$modal',function($scope, $http,$modal){
So, I got an error today when I try to run Login function in Ionic.
The error said : TypeError: User.login is not a function (on controller.js
This is my controller.js :
angular.module('starter.controllers', [])
.controller('LoginCtrl', function($scope, User, $state) {
$scope.signIn = function(user) {
$scope.loginResult = User.login(user,
function(res) {
console.log('Login success');
console.log(res);
$state.go('tab.dash');
// success
}, function(res) {
// error
});
}
})
and this is my login.html :
<div class="list list-inset">
<label class="item item-input">
<input type="email" placeholder="Email" ng-model="user.email">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="user.password">
</label>
</div>
<button class="button button-block button-calm" ng-click="signIn(user)">Login</button>
This is my route in app.js :
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
Please correct my code.
Thanks for ur effort :)
Have you set up the loopback-sdk-angular properly? Please see my example at https://github.com/strongloop/loopback-getting-started-intermediate/blob/master/client/js/services/auth.js#L6-L15
I got undefined inside my ng-model. I already defined inside my controller. $scope.rule.message no issue but for $scope.rule.ruleId got undefined.
html
<form>
<div class="form-group">
<label>Group</label> <select ng-model="rule.ruleId" ng-repeat="rule in rules">
<option value="{{rule.ruleId}}">
#{{rule.keyword}}
</option>
</select>
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" cols="" name="" rows="" ng-model="rule.message">
</textarea>
</div>
<div class="form-group">
<button class="btn btn-default" type="submit" ng-click="create()">Save</button>
</div>
</form>
js
mzsmsControllers.controller('MemberBlastCreateCtrl', ['$scope', '$http',
'$location',
function($scope, $http, $location) {
$scope.rule = {};
$http({
method: 'GET',
url: 'http://example.com/get_all_rules.php?fbId=' + sessionStorage.id
}).
success(function(data, status, headers, config) {
$scope.rules = data.rules;
}).
error(function(data, status, headers, config) {
alert("No internet connection.");
});
$scope.create = function() {
$http({
method: 'GET',
url: 'http://example.com/create_blast.php?fbId=' + sessionStorage.id +
'&ruleId=' + $scope.rule.ruleId + '&message=' + $scope.rule.message
}).
success(function(data, status, headers, config) {
alert(JSON.stringify(data));
alert("SMS Blast successfuly created.");
$location.path("/member/blast");
}).
error(function(data, status, headers, config) {
alert("No internet connection.");
});
}
}
]);
I guess the problem is that ng-repeat creates a new scope, try changing the ng-repeat:
<select ng-model="rule.ruleId" ng-repeat="r in rules">
<option value="{{r.ruleId}}">
#{{r.keyword}}
</option>
</select>
I am new in angularJS. I write some code for navigation and it was work perfect. But it's stop working when I integrate MetroPreLoader in my angularJs service. It change browser URL but view does not update. if i remove MetroPreLoader from my service then it`s works again.
Here is my Code :
Service :
voiceAppControllers.factory('appService', function ($http, $log, $window) {
return {
showWaitBar : function() {
MetroPreLoader.setup({
logoUrl: "Content/Images/logo.png",
logoWidth: "100px",
logoHeight: "100px",
multipleBGColors: ["#CA3D3D", "#F58A16", "#32A237", "#A110E6"],
delay: "Unlimited"
});
MetroPreLoader.run();
},
hideWaitbar : function() {
MetroPreLoader.close();
}
};
})
Controller :
voiceAppControllers.controller('loginController', ['$scope', '$http', '$location', '$timeout', 'appService', 'notificationService',
function ($scope, $http, $location,$timeout, appService, notificationService) {
var onSuccess = function () {
notificationService.pushNotifaction("service update successfully.");
};
var onError = function () {
notificationService.pushNotifaction("service update fail.");
};
$scope.login = function () {
var credentials = "grant_type=password&username=" + $scope.loginModel.Username + "&password=" + $scope.loginModel.Password;
console.log(credentials);
appService.showWaitBar();
$http({
method: 'POST',
url: appService.loginUrl,
data: credentials,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
.success(function (data) {
console.log(data.access_token);
appService.updateAuthInfo(data.userName, data.access_token);
appService.hideWaitbar();
$location.path(appService.routes.dahboard);
})
.error(function () {
appService.clearAuthInfo();
appService.hideWaitbar();
$location.path(appService.routes.login);
notificationService.pushNotifaction("Login Fail. Wrong username and password.");
});
};
}
]);
when i comment appService.showWaitBar() and appService.hideWaitbar() then its works fine.
I defiantly miss something but don`t figure out that it is.
Thnaks.
Update 1:
my App.js is :
var voiceAppControllers = angular.module('voiceAppControllers', []);
var voiceApp = angular.module('voiceApp', ['ngRoute', 'voiceAppControllers', 'kendo.directives']);
voiceApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/organization', {
templateUrl: 'Templates/OrganizationTemplate.html',
controller: 'organizationController'
}).when('/service', {
templateUrl: 'Templates/ServiceTemplate.html',
controller: 'serviceController'
}).when('/login', {
templateUrl: 'Templates/LoginTemplate.html',
controller: 'serviceController'
}).when('/Dashboard', {
templateUrl: 'Templates/DashboardTemplate.html',
controller: 'dashboardController'
}).
otherwise({
redirectTo: '/login'
});
}]);
Login View is :
<div ng-controller="loginController">
<form name="loginFrom" novalidate ng-submit="login(loginFrom)">
<input type="hidden" ng-model="loginModel.Id" />
<h1>Login</h1>
<label>Need Some Text</label>
<div>
<label>username :</label>
<div class="input-control text">
<input type="text" placeholder="Your username" required ng-model="loginModel.Username" />
</div>
</div>
<div>
<label>password :</label>
<div class="input-control password">
<input type="password" placeholder="Your password" required ng-model="loginModel.Password" />
</div>
</div>
<div class="offset3">
<input class="primary" type="submit" value="UPDATE" ng-disabled="loginFrom.$invalid" />
</div>
</form>
</div>
my Dashboard View is :
<div ng-controller="dashboardController">
<h1>Dashboard</h1>
<input type="button" value="Next" />
</div>