Only the last directive on an AngularJS page maintains it's binding - javascript

I've got a couple directives that I intend to be reusable elements, so I'm using scope isolation. Each directive has it's own dedicated controller which pulls it's data from mongo based on url.
The problem is that only the last directive on the page is showing the data to which it is bound. Doesn't matter what order I put the directives in, only the last one works, and each one does work. For ex I do get the customer dump into the log, but nothing shows up in {{ here }} unless it's the last directive in the page.
I'm fairly certain this is a scope issue, but these are meant to be isolated for reuse, so why would they be blanking each other out?
On the code...
js
.controller('getCustomerList',function(customerIOService){
_this = this;
_this.customers = {};
customerIOService.list()
.success(function(data, status, headers, config){
_this.customers = data;
})
.error(function(data, status, headers, config){
console.log('error Data :: ');
//console.log(data);
if(status == 403){
_this.error = 'You need to be logged in to view this page.';
}else{
_this.error = 'An error occured during the customer list request.';
}
});
})
.controller('getCustomerAppointments',function(customerIOService){
_this = this;
_this.appointments = {};
customerIOService.getAppointments()
.success(function(data, status, headers, config){
_this.appointments = data;
//console.log(data);
})
.error(function(data, status, headers, config){
console.log('error Data :: ');
//console.log(data);
if(status == 403){
_this.error = 'You need to be logged in to view this page.';
}else{
_this.error = 'An error occured during the appointments list request.';
}
});
})
.controller('getCustomerSingle', function(customerIOService) {
_this = this;
_this.customer = {};
_this.updateSuccess = false;
customerIOService.one()
.success(function(data, status, headers, config){
_this.customer = data;
console.log(data);
})
.error(function(data, status, headers, config){
console.log('error Data :: ');
//console.log(data);
if(status == 403){
_this.error = 'You need to be logged in to view this page.';
}else{
_this.error = 'An error occured during the customer fetch request.';
}
});
_this.update = function(){
customerIOService.update(_this.customer)
.success(function(data, status, headers, config){
_this.customer = data;
_this.updateSuccess = true;
})
.error(function(data, status, headers, config){
console.log('error Data :: ');
//console.log(data);
if(status == 403){
_this.error = 'You need to be logged in to view this page.';
}else{
_this.error = 'An error occured during the customer update.';
}
});
}
})
.directive('customerList',function() {
return {
scope: {},
restrict:'E',
templateUrl: 'views/templates/customersList.html',
replace: true,
controller: 'getCustomerList',
controllerAs: 'ctrl'
};
})
.directive('customerSingle',function() {
return {
scope: {},
restrict:'E',
templateUrl: 'views/templates/customersSingle.html',
replace: true,
controller: 'getCustomerSingle',
controllerAs: 'singleCustCtrl'
};
})
.directive('customerAppointments',function() {
return {
scope: {},
restrict:'E',
templateUrl: 'views/templates/customersAppointmentsList.html',
replace: true,
controller: 'getCustomerAppointments',
controllerAs: 'custApptCtrl'
};
})
Parent html
<section>
<div class="sectionHeader oswald font-light panel panel-default panel-body panel-success text-center">Customer Update</div>
<div class="panel panel-default panel-body panel-success">
<customer-single></customer-single>
</div>
<div class="panel panel-default panel-body panel-success">
<customer-appointments><customer-appointments/>
</div>
<div class="panel panel-default panel-body panel-success">
<customer-list><customer-list/>
</div>
</section>
Directive html
<span>
<a href="/appointments/create/{{custApptCtrl.customer._id}}">
<span class="fa-stack fa-lg pull-left">
<i class="fa fa-plus fa-stack-1x "></i>
</span>
Add Appointment
</a>
<table class="table table-striped">
<thead>
<tr>
<th>Caregiver</th>
<th>Start</th>
<th>End</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="appt in custApptCtrl.appointments">
<td>{{ appt.employee.lastName }}, {{ appt.employee.firstName }}</td>
<td>{{ appt.startDate }}</td>
<td>{{ appt.endDate }}</td>
<td><span class="glyphicon glyphicon-pencil"></span></td>
</tr>
</a>
</tbody>
</table>
</span>

Your controllerAs syntax seems a little fishy to me, can you give this a try instead:
controller:
app.controller('xyz', function() {
var xyzVm = this;
// and now use this xyzVm instead of _this everywhere in the controller
});
and then in your directive
.directive('customerList',function() {
return {
scope: {},
restrict:'E',
templateUrl: 'views/templates/customersList.html',
replace: true,
controller: 'xyz',
controllerAs: 'xyzVm'
};
})
so now your template can use xyzVm.appointments within the repeater

Related

how to return boolean value in controller with $http.get

So i would like to return boolean value in my controller. Only I would like to do is try to use it with ng-show / ng-hide when boolean is true / false to hide content not desired for normal user but for admin only. This is my code:
parts of my adminController.js:
.constant("userUrl", "http://localhost:5500/users/type")
.controller("typeCtrl", function($scope, $http, userUrl) {
$http.get(userUrl, {withCredentials : true})
.success(function (data) {
$scope.users = data;
})
.error(function (error) {
$scope.error = error;
});
$scope.thisUser;
})
part of my admin.html i would like to use the value for example :
<div ng-show="thisUser == true" class="col-xs-3 panel-body">
I hope you understand what I mean.
I am beginning with angular and can't return the value of "type" in my resource "users" to put it in the view from the controller.
You have to do something like:
$http.get(userUrl, {withCredentials : true})
.success(function (data) {
$scope.user = data;
})
<div ng-show="user.type == 'admin'" class="col-xs-3 panel-body">

How to get object of array in view file in ionic framework

I am working with ionic framework I am getting data into localStorage.
.controller('AppCtrl', function(Auth,$scope,$http, $ionicModal,$location,$state,$window,$localStorage, $sessionStorage,$timeout,$ionicSideMenuDelegate) {
//$scope.$on('$ionicView.leave', function () { $ionicSideMenuDelegate.canDragContent(true) });
$scope.adminData = $localStorage.adminData;
$scope.forgetData = $sessionStorage.forgetData;
$scope.levels = $localStorage.levels;
$scope.loginData = {}
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$scope.levels = function() {
$http({
url: 'http://localhost/bearscoaching/api/classes',
headers : {
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'}
})
.then(function successCallback(response)
{
function isObjectHasData(object)
{
return (object != null && typeof object != 'undefined' && Object.keys(object).length > 0);
}
if(isObjectHasData(response.data))
{
$scope.dp = response.data;
$localStorage.levels = $scope.dp;
/*angular.forEach($localStorage.levels, function(user, arrayID)
{
alert(user.name);
});*/
$state.go('app.search');
}
else
{
alert("Data is not available");
//$state.go('app.dashboard');
}
}, function errorCallback(response)
{
console.log(response);
// $state.go('app.dashboard');
alert("Data is not available");
});
};
})
when I run foreach loop I am getting every name in alert.But when I get these data in view file like:
<ion-modal-view>
<ion-view view-title="Marie Simpson" id="mainpage" hide-nav-bar="false">
<ion-content padding="true" scroll="false">
<table>
<thead>
<th>Name</th>
</thead>
<tbody ng-repeat="item in levels">
<tr>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</ion-content>
</ion-view>
</ion-modal-view>
I am not getting name of list.my response is
ngStorage-levels: "[{"id":2,"name":"Level I"},{"id":3,"name":"Level I…":6,"name":"Level V"},{"id":7,"name":"Level VI"}]"

How to properly iterate over an array elements with Angular JS?

I want to render a table adding row per each objects in an array.
I got a Controller like:
app.controller('SignUpController',function ($scope, $http) {
var that = this
that.users = []
that.queryUsers = function() {
console.log("I'm being triggered")
$http.get("/existingUsers").
success(function (data,status,headers,config) {
console.log(data)
that.users = data
console.log(that.users)
}).
error(function (data,status, headers, config) {
console.log(status)
})
}
})
And the table markup:
<table class="table table-bordered">
<th ng-repeat="th in ['mail','Administrador','Miembro desde']">{{th}}</th>
<tr ng-repeat="p in signup.users">
<td>{{p._id}}</td>
<td>{{p.mail}}</td>
<td>{{p.admin}}</td>
</tr>
</table>
Ttable is within a div with ng-controller="SignUpController as signup". When I click a button I trigger queryUsers actually seein results in browser console:
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
Both mail and _id are existing attributes per each object.
So the AJAX is being done and the array I should be iterating and rendering to HTML rows actually exists and is populated, but no rows are shown.
Why?
Edit
I tried not modifying the scope:
app.controller('SignUpController', function ($scope,$http) {
$scope.users = []
$scope.queryUsers = function() {
console.log("I'm being triggered")
$http.get("/existingUsers").
success(function (data,status,headers,config) {
console.log(data)
$scope.users = data
console.log($scope.users)
}).
error(function (data,status, headers, config) {
console.log(status)
})
}
})
<div class="tab-pane" id="usecase11" ng-controller="SignUpController">
<h3>Colaboradores</h3>
<div class="row">
<div class="col-sm-6">
<table class="table table-bordered">
<th ng-repeat="th in ['mail','Administrador','Miembro desde']">{{th}}</th>
<tr ng-repeat="p in users">
<td>{{p._id}}</td>
<td>{{p.mail}}</td>
<td>{{p.admin}}</td>
<td style="border:none;"><a class="close" ng-click="">$</a></td>
<td style="border:none;"><a class="close" ng-click="">*</a></td>
</tr>
</table>
</div>
</div>
</div>
However, again I can see such array printed at browser console but nothing rendered to HTML
Here is the evidence that queryUsers is being called and that $scope.users is getting something after it.
Something interesting is that I got: {{users}} right after the table and it's displaying an empty array.
Just in case this is the GET handling server code:
app.get('/existingUsers',function (request, response) {
membersCollection.find({},{"password":0}, function (err, data) {
if (err) response.send(404)
else {
data.toArray(function (err, docs) {
if (err) {
console.log(error)
response.send("Error")
}
response.send(JSON.stringify(docs, null, 4))
})
}
})
}
You don't modify the $scope. Here is the corrected code:
app.controller('SignUpController',function ($scope, $http) {
$scope.users = []
$scope.queryUsers = function() {
console.log("I'm being triggered")
$http.get("/existingUsers").
success(function (data,status,headers,config) {
console.log(data)
$scope.users = data
console.log($scope.users)
}).
error(function (data,status, headers, config) {
console.log(status)
})
}
})
HTML:
<table class="table table-bordered">
<th ng-repeat="th in ['mail','Administrador','Miembro desde']">{{th}}</th>
<tr ng-repeat="p in users">
<td>{{p._id}}</td>
<td>{{p.mail}}</td>
<td>{{p.admin}}</td>
</tr>
</table>

How to process an array with AngularJS?

I have an API returning the following simple JSON array:
[
"efd98ad-first_key",
"100eb0a-second_key"
]
I am trying to render this as a table with Angular:
<div name="listkeys" class="container">
<div class="starter-template">
<div ng-bind-html="message"></div>
<table class="table table-striped table-bordered table-condensed sortable" ng-init="getKeys()">
<tr>
<th>bucket</th>
</tr>
<tr ng-repeat="bucket in buckets">
<td>{{bucket}}</td>
</tr>
</table>
</div>
</div>
JS:
var app = angular.module('flipDaSwitch', ['ngSanitize']);
app.controller('ListKeys', function($scope, $http) {
$scope.getKeys = function() {
$http.get('/api/keys').
success(function (data) {
$scope.response = data;
}).
error(function (data){
$scope.response = {}
});
};
});
It does not do anything but throwing an "Uncaught object" error and that is it.
How could I debug why it is failing?
You are storing the values in $scope.response, but you are using $scope.bucket at the ng-repeat:
$scope.getKeys = function() {
$http.get('/api/keys').
success(function (data) {
$scope.buckets= data;
}).
error(function (data){
$scope.buckets= {}
});
};
It looks like you do not have a scope item called buckets. I'd expect to see:
$scope.buckets = data
Inside the success callback.

How to write an angularJs Controller to GET Rest Data from Parse.com

See solution below:
I'm trying to connect to a Parse.com Rest backend and display data from object values.
HTML (I put several angular calls to be sure to catch output):
<div ng-controller="MyController">
<p>{{item}}<p>
<p>{{items}}<p>
<p>{{item.firstName}}<p>
<p>{{data}}<p>
</div>
JAVASCRIPT rest:
function MyController($scope, $http) {
$scope.items = [];
$scope.getItems = function() {
$http({method : 'GET',url : 'https://api.parse.com/1/classes/Professional/id', headers: { 'X-Parse-Application-Id':'XXXX', 'X-Parse-REST-API-Key':'YYYY'}})
.success(function(data, status) {
$scope.items = data;
})
.error(function(data, status) {
alert("Error");
});
};
}
This won't work, it does strictly nothing, not even a message in the console.
I know the rest call got the correct credential, as I'm able to get object content returned when I test it with a rest tester program. Maybe the URL should not be absolute ?
Any clue is very welcome, i've spent DAYS on that.
SOLUTION:
Thanks to the help of people answering this thread, I was able to find the solution to this problem so I just wanted to contribute back:
Get Json object data from Parse.com backend, pass it authentification parameters:
function MyController($scope, $http) {
$scope.items = [];
$scope.getItems = function() {
$http({method : 'GET',url : 'https://api.parse.com/1/classes/Professional', headers: { 'X-Parse-Application-Id':'XXX', 'X-Parse-REST-API-Key':'YYY'}})
.success(function(data, status) {
$scope.items = data;
})
.error(function(data, status) {
alert("Error");
});
};
Notice that ' ' necessary arround header key object values. Those ' ' are not necessary around method and url keys.
Template that list all 'firstName' of each object:
<div ng-controller="MyController" ng-init="getItems()">
<ul>
<li ng-repeat="item in items.results"> {{item.firstName}} </li>
</ul>
</div>
Notice: "item in items.results". "results" is necessary because the return value is a JSON object that contains a results field with a JSON array that lists the objects. This could save you some headache.
Also notice "ng-init": if you don't put that, or any other form of call to the getItem(),then nothing will happen and you will be returned no error.
That was my first try of Angularjs, and i'm already in love ^^.
Based in your request the controller should be:
HTML
<div ng-controller="MyController">
<button type="button" ng-click="getItems()">Get Items</button>
<ul>
<li ng-repeat="item in items"> item.firstName </li>
</ul>
</div>
JS
function MyController($scope, $http) {
$scope.items = []
$scope.getItems = function() {
$http({method : 'GET',url : 'https://api.parse.com/1/classes/Users', headers: { 'X-Parse-Application-Id':'XXXXXXXXXXXXX', 'X-Parse-REST-API-Key':'YYYYYYYYYYYYY'}})
.success(function(data, status) {
$scope.items = data;
})
.error(function(data, status) {
alert("Error");
})
}
}
Just a little update to the newer versions of Angular (using .then since version 1.5):
myApp.controller('MyController', function($scope, $http) {
$scope.items = []
$http({
method: 'GET',
url: 'https://api.parse.com/1/classes/Users',
headers: {'X-Parse-Application-Id':'XXXXXXXXXXXXX', 'X-Parse-REST-API-Key':'YYYYYYYYYYYYY'}
})
.then(function successCallback(response) {
alert("Succesfully connected to the API");
$scope.items = data;
}, function errorCallback(response) {
alert("Error connecting to API");
});
});
var app = angular.module("app",[]);
app.controller("postcontroller", function($scope, $http){
$scope.getAllProjects = function() {
var url = 'https://reqres.in/api/products';
$http.get(url).then(
function(response) {
$scope.projects = response.data.data;
},
function error(response) {
$scope.postResultMessage = "Error with status: "
+ response.statusText;
});
}
$scope.getAllProjects();
});
<div ng-app="app">
<div ng-controller="postcontroller">
<div class="panel-body">
<div class="form-group">
<label class="control-label col-sm-2" for="project">Project:</label>
<div class="col-sm-5">
<select id="projectSelector" class="form-control">
<option id="id" ng-repeat="project in projects"
value="{{project.id}}">{{project.name}}</option>
</select>
</div>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>

Categories