We Keep Coding

UI Router $state.go with params animating a parent state twice (Only in Chrome)

I am having an issue with ui-router and the $state.go method with params.
When clicking on a building unit while the building overview state is expanded. The buildingOverview controller is run again which then animates the overview panel again.
The weird part about this is I only have this issue while in chrome.
The panels work as intended in all other browsers.
If I adjust the url to /?buildingID or /?id the panel works as intended however, I don't get the HTML5/SEO friendly URLS.
Please see attached video and code.
https://vimeo.com/173318836
My index.route.js
(function() {
'use strict';
angular
.module('mrkb')
.config(routerConfig);
/** #ngInject */
function routerConfig($locationProvider, $stateProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('building', {
abstract: true,
'url': '/bldg',
views: {
'': {
templateUrl: 'app/building/index.html',
controller: 'BuildingController as building'
},
'building-overview#building': {
templateUrl: 'app/building/overview/overview.html',
controller: 'BuildingOverviewController as buildingOverview'
},
'building-map#building': {
templateUrl: 'app/building/map/map.html',
controller: 'BuildingMapController as buildingMap'
}
}
})
.state('building.landing', {
'url': '/landing',
'': {
templateUrl: 'app/building/index.html',
controller: 'BuildingController as building'
}
})
.state('building.overview', {
'url': '/:buildingID',
views: {
'building-overview#building': {
templateUrl: 'app/building/overview/overview.html',
controller: 'BuildingOverviewController as buildingOverview',
resolve: {
init: ['BuildingResultModel', '$timeout', function(BuildingResultModel, $timeout){
if(!BuildingResultModel.expanded){
$timeout(function(){
BuildingResultModel.expanded = true;
},50);
}
}]
}
}
}
})
.state('building.detail', {
'url': '/:buildingID/:id',
views: {
'building-detail#building': {
'templateUrl': 'app/building/detail/detail.html',
'controller': 'BuildingDetailController as buildingDetail',
resolve: {
init: ['BuildingResultModel', '$timeout', function(BuildingResultModel, $timeout){
if(!BuildingResultModel.expanded && !BuildingResultModel.detailExpanded){
$timeout(function(){
BuildingResultModel.expanded = true;
BuildingResultModel.detailExpanded = true;
},50);
}
}]
}
}
}
});
$urlRouterProvider.otherwise('/bldg/landing');
}
})();
The Detail Controller
(function(){
'use strict';
angular
.module('mrkb')
.controller('BuildingMapController', BuildingMapController);
function BuildingMapController ($log, $state, BuildingResultModel, $timeout){
var vm = this;
vm.mapModel = BuildingResultModel;
vm.mapModel.currentBldgID = $state.params.buildingID;
vm.navigateToBuildingState = function(bldgNum){
if(!BuildingResultModel.expanded){
$timeout(function(){
BuildingResultModel.expanded = true;
BuildingResultModel.shiftMap = true;
}, 50);
}
BuildingResultModel.detailExpanded = false;
// reset filter by building names and plan types array
BuildingResultModel.currentBldgNames = [''];
BuildingResultModel.FloorPlanTypeAvailability = [''];
$state.go('building.overview', { buildingID:bldgNum });
};
// Navigate to landing
vm.navigateToLanding = function(event){
event.preventDefault();
BuildingResultModel.detailExpanded = false;
$timeout(function(){
BuildingResultModel.expanded = false;
BuildingResultModel.shiftMap = false;
},50);
$state.go('building.landing');
}
}
})();
Overview Controller (First Panel)
(function(){
'use strict';
angular
.module('mrkb')
.controller('BuildingOverviewController', BuildingOverviewController);
function BuildingOverviewController($log, $state, BuildingResultModel, $timeout){
var vm = this;
vm.overviewModel = BuildingResultModel;
// set BuildingResultModel for current building number to building ID passed in from state params
BuildingResultModel.currentBldgID = $state.params.buildingID;
// detail panel with building ID as param
vm.viewDetail = function(id){
$timeout(function(){
BuildingResultModel.detailExpanded = true;
},50);
$state.go('building.detail', { buildingID:BuildingResultModel.currentBldgID, id:id });
};
// Static floor plan items
vm.floorPlanItems = [
{
icon: 'icon-makoa-coaster',
name: 'Makoa',
bedroom: '3 Bedroom'
},
{
icon: 'icon-leilani-coaster',
name: 'Leilani',
bedroom: '3 Bedroom + Den'
},
{
icon: 'icon-kahua-coaster',
name: 'Kahua',
bedroom: '4 Bedroom'
}
];
// Set Active Floor Plan Filter
vm.floorPlanItemsActive = vm.floorPlanItems;
vm.setActive = function(filterItem) {
vm.floorPlanItemsActive = filterItem;
};
vm.residenceItemsActive = BuildingResultModel.allBuildings;
// Set Active Residence Unit
vm.setActiveResidence = function(id) {
vm.residenceItemsActive = id;
}
vm.AvailabiltyOptions = [
{
availability: 'available'
},
{
availability: 'sold'
},
{
availability: 'pending'
}
];
vm.filterByFloorPlan = function(name){
// Remove default class from the three floorplan filters
vm.overviewModel.filterFloorplanItemDefault = false;
BuildingResultModel.currentBldgNames = [];
BuildingResultModel.FloorPlanTypeAvailability = [''];
BuildingResultModel.currentBldgNames.push(name.toLowerCase());
};
vm.filterByAvailability = function(availability){
BuildingResultModel.FloorPlanTypeAvailability = [];
BuildingResultModel.FloorPlanTypeAvailability.push(availability);
}
vm.resetFilters = function () {
BuildingResultModel.FloorPlanTypeAvailability = [''];
}
}
})();
Map Template
<div class="mapped-item-1"
ng-class="{'active': buildingMap.mapModel.currentBldgID == 1}"
ng-click="buildingMap.navigateToBuildingState(1)">
<span class="building-text">Building</span><br />
<span class="building-number">1</span>
<div class="map-arrow"></div>
</div>
<div class="mapped-item-5"
ng-class="{'active': buildingMap.mapModel.currentBldgID == 5}"
ng-click="buildingMap.navigateToBuildingState(5)">
<span class="building-text">Building</span><br />
<span class="building-number">5</span>
<div class="map-arrow"></div>
</div>
<div class="mapped-item-2"
ng-class="{'active': buildingMap.mapModel.currentBldgID == 2}"
ng-click="buildingMap.navigateToBuildingState(2)">
<span class="building-text">Building</span><br />
<span class="building-number">2</span>
<div class="map-arrow"></div>
</div>
<div class="overlay">
</div>
<div class="map-hit-area" ng-click="buildingMap.navigateToLanding($event)"></div>
First Panel Template (Overview Panel)
<header class="building-panel-header">
<h4>Select Floorplan</h4>
</header>
<!-- Floor Plan Options Filter-->
<ul class="building-panel-floorplans">
<li ng-repeat="floorPlan in buildingOverview.floorPlanItems">
<a ng-href="#"
ng-click="buildingOverview.filterByFloorPlan(floorPlan.name); buildingOverview.setActive(floorPlan)"
ng-class="{ 'active' : buildingOverview.floorPlanItemsActive === floorPlan, default: buildingOverview.overviewModel.filterFloorplanItemDefault == true }">
<i class="icon {{floorPlan.icon}}"></i>
<span>{{floorPlan.name}}</span>
<p>{{floorPlan.bedroom}}</p>
</a>
</li>
</ul>
<!-- Units -->
<h4>Select Residences</h4>
<ul class="building-panel-units">
<li ng-repeat="building in building.buildingModel.allBuildings | filterMultipleKeyValues: {buildingID: building.buildingModel.currentBldgID, name:building.buildingModel.currentBldgNames, availability:building.buildingModel.FloorPlanTypeAvailability}">
<a href="#"
class="{{building.availability}} "
ng-class="{'active': buildingOverview.residenceItemsActive === building.id }"
ng-click="buildingOverview.viewDetail(building.id, building.name); buildingOverview.setActiveResidence(building.id);">
<i class="icon icon-{{building.name}}-coaster"></i>
<span class="building-panel-unit-number">{{building.id}}</span>
</a>
</li>
</ul>
<!-- Unit Availability Filter-->
<div class="building-panel-options">
<button ng-repeat="availabiltyOption in buildingOverview.AvailabiltyOptions"
ng-click="buildingOverview.filterByAvailability(availabiltyOption.availability)"
ng-dblclick="buildingOverview.resetFilters()"
class="btn {{availabiltyOption.availability}}">{{availabiltyOption.availability}}
</button>
</div>

displaying data ng-repeat from $scope.items query not working

I do not know what is wrong, ng-repeat is not
populating the information on my div, please look at the following
and advice where I have gone wrong
app.js
var mainApp = angular.module('mainApp', ["ngRoute", "ngResource"]);
mainApp.factory('EventListFactory',['$resource', EventListFactory]);
mainApp.controller('EventListCtrl', ['$scope','EventListFactory', EventListCtrl]);
var configFunction = function ($routeProvider) {
$routeProvider.
when('/Register', {
templateUrl: 'routesDemo/Register'
})
.when('/UpdateProfile', {
templateUrl: 'routesDemo/UpdateProfile'
})
.when('/Events', {
templateUrl: 'routesDemo/Events',
controller: EventListCtrl,
})
.when('/routeThree', {
templateUrl: 'routesDemo/three'
});
}
configFunction.$inject = ['$routeProvider'];
mainApp.config(configFunction);
EventListFactory.js
var EventListFactory = function ($resource, $location) {
var baseUrl = "";
if (window.location.hostname == 'localhost') {
baseUrl = "http://localhost:52182/api/Events/GetEvents/";
}
else
{
var deployAt = window.location.href.substring(0, window.location.href);
baseUrl = deployAt + "/api/Events/GetEvents";
}
var respone = $resource(baseUrl, null, { query: { method: 'GET', isArray: true, url: baseUrl }, get: { method: 'GET', url: baseUrl } });
console.log("api json at :" + baseUrl);
var records = respone.query();
console.log(records);
return records;
}
EventListController.js
var EventListCtrl = function ($scope, EventListFactory) {
$scope.Message = 'I work';
$scope.items = EventListFactory;
};
EventListCtrl.$inject = ['$scope'];
in the html:
<div id="listView" >
<h1 class="form-signin-heading">For real {{Message}}</h1>
<div ng-controller="EventListCtrl">
<p class="form-signin-heading">Populated Data</p>
<div ng-repeat="item in items ">
<span class="control-label">Heading : </span> {{item.Heading}}
<br/>
<span class="control-label">Event Date : </span> {{item.EventDate}}
<br/>
</div>
</div>
</div>
running the site:
api call from browser:

the code for ng-repeat is correct, but your items is an empty array so nothing gets displayed.
From the screenshots it appears that records in EventListFactory.js does not return an array but a promise.
In EventListController.js instead of
$scope.items = EventListFactory;
Try something like:
var promise = EventListFactory;
promise.then(function(data){
$scope.items = data;
})

AngularJS: Update JSON in modal with specific key

What's the best practice to update json in view with specific key.
In my case, i want to update feedback from 'not answered' to 'answered' .
[
{
"id": "34",
"mac_address": "cd:9e:17:64:1b:42",
"question": "Help me",
"time": "2016-03-16 16:22:08",
"is_answered": false
}
]
to
[
{
"id": "34",
"mac_address": "cd:9e:17:64:1b:42",
"question": "Help me",
"time": "2016-03-16 16:25:29",
"is_answered": true
}
]
There is some list my customer feedbacks:
<div class="parent" ng-repeat="customer in customers">
<h2>{{customer.id}}</h2>
<p>{{customer.question}}</p>
<h4 ng-show="{{customer.is_answered}}">Answered</h4>
<h4 ng-show="!{{customer.is_answered}}">Not Answered</h4>
<button ng-show="!{{customer.is_answered}}" ng-click="showModal()">Reply</button>
</div>
When i click reply button,then appear modal with some inputs to response my customer complaints.
<div id="modal">
<textarea placeholder=""response></textarea>
<button ng-click="submit()">Reply</button>
</div>
i want to update based of feedback id, and again, what the best practice how to do it?

You can pass the customer object with showModal call.
<div class="parent" ng-repeat="customer in customers">
<h2>{{customer.id}}</h2>
...
<button ng-show="!{{customer.is_answered}}" ng-click="showModal(customer)">Reply</button>
</div>
Inside your controller, save this passed in customer. Once modal closed, update is_answered property of that customer.
$scope.showModal = function (customer) {
var selected_customer = customer;
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
customer: customer
});
modalInstance.result.then(function () {
selected_customer.is_answered = true;
}
};

Found my solution, based on Pass input value to $mdDialog.
vm.showModal = function(e, message) {
$mdDialog.show({
clickOutsideToClose:true,
// locals:{ name: 'Bob'},
controller: function ($mdDialog) {
var vm = this;
vm.message = {};
vm.message = message;
$scope.hide = function () {
$mdDialog.hide();
};
$scope.cancel = function () {
$mdDialog.cancel();
};
},
controllerAs: 'modal',
templateUrl: 'feedbackForm.html',
parent: angular.element(document.body),
targetEvent: e,
});
};
In my view :
<h5 style="">{{modal.message.id}}</h5>
Thank you guys

Pass datas between routes angularjs/expressjs

I have a form, and when I submit it, another form is displayed with radio buttons which are other datas. I select one and submit it. I want the data to be displayed in another page but it doesn't display anything with what I've done.
So there is the /form route, and I want to be redirect on the /confirmation route with my datas after the last submit.
Bellow is my formController in angularjs
.controller('formController', ['$scope', '$http', '$location', function($scope, $http, $location) {
$scope.pageClass = 'form';
$scope.firstName = '';
$scope.lastName = '';
$scope.email = '';
$scope.departure = '';
$scope.destination = '';
$scope.submitFirstForm = function() {
$http.post('/form', {
firstName: $scope.firstName,
lastName: $scope.lastName,
email: $scope.email,
departure: $scope.departure,
destination: $scope.destination,
}).then(function(res) {
$scope.response = res.data;
});
}
$scope.submitConfirmationForm = function(flight){
$http.post('/confirmation', {
departure: $scope.departure,
destination: $scope.destination
}).then(function(res) {
$scope.otherResponse = res.data;
$location.path("/confirmation");
});
};
}]);
Bellow is my express post function only for the /CONFIRMATION route
app.post("/confirmation",function(req,res)
{
var departure=req.body.departure;
var destination=req.body.destination;
otherResponse = {
"confirmation": [{
"departure": departure,
"destination": destination,
"msg": "MSG OK",
}]
};
res.json(otherResponse);
});
Finally, bellow my confirmation.html to see what is going on with my json otherReponse
<pre>
{{otherResponse | json}}
</pre>

You are not passing the 'value', you need to do something like this:
$location.path('/confirm/').search({param: 'otherResponse'});
$location methods are chainable.
this produce :
/confirm/?param=otherResponse
Check the doc for $location

AngularJS Custom Filter getting invoked multiple times with one change

Following are my questions on the code described below -
On page load, my below custom sort filter is getting called multiple times. why?
On selecting a select option (from directive), I want to trigger filter based on selected value (using two way binding). Here again filter is being called thrice. Why?
Can some one point me to answers? I know that Angular does a Dirty Check by comparing old and new digest, but why multiple and 3rd invocation (as mentioned in the above questions).
I have below directive -
angular.module("customDirectives", [])
.directive("sortAll", function () {
return {
restrict: "E",
scope: {
columns: "=sortcolumns",
optionselected: "=selectedoption"
},
templateUrl: '../Views/Directives/SortAll.html',
controller: function ($scope) {
$scope.sortOptions = [];
var asc = 'Ascending';
var desc = 'Descending';
$scope.getSortOptions = function () {
angular.forEach($scope.columns, function (item) {
$scope.sortOptions.push({ name: item + '-' + asc, value: asc });
$scope.sortOptions.push({ name: item + '-' + desc, value: desc });
});
$scope.optionselected = $scope.sortOptions[1];
return $scope.sortOptions;
}
}
};
});
Directive HTML -
<select name="sortOptions" id="sortOptions" class="form-control width-20percent pull-right"
ng-options="option.name for option in sortOptions"
ng-init="getSortOptions()"
ng-model="optionselected"></select>
And below Filter -
angular.module("customFilters", [])
.filter("sort", function ($filter) {
return function (data, sortOption) {
console.log(sortOption);
if (angular.isArray(data) && angular.isObject(sortOption)) {
var options = sortOption["name"].split('-');
var xc = options[1] == 'Ascending' ? false : true;
return $filter("orderBy")(data, options[0], xc);
} else {
return [];
}
}
});
Now my Controller code -
angular.module("productStore")
.controller("ProductListCtrl", function ($scope, $filter) {
});
And the main controller which gives the data -
angular.module("productStore")
.constant("dataUrl", "http://localhost:57398/testdata/Products.json")
.constant("productColumns", ["name","price","description"])
.controller("MainCtrl", function ($scope, $http, dataUrl, productColumns) {
$scope.data = {};
$scope.productColumns = productColumns;
$http.get(dataUrl)
.success(function (products) {
$scope.data.products = products;
})
.error(function (error) {
$scope.data.error = error;
})
});
HTML -
<body ng-controller="MainCtrl">
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">PRODUCT STORE</a>
</div>
<div class="panel-default" ng-controller="ProductListCtrl" ng-hide="data.error" ng-cloak>
<div class="col-xs-8">
<sort-All sortcolumns="productColumns" selectedoption="selectedSortOption"></sort-All>
<div class="well padding-top-0px" ng-repeat="product in data.products | sort:selectedSortOption">
<h3>
<strong>{{product.name}}</strong>
<span class="pull-right label label-primary">
{{product.price | currency}}
</span>
</h3>
<span class="lead">{{product.description}}</span>
</div>
</div>
</div>
</body>
Sample Data -
[{
"category": "Watersports",
"description": "A boat for one person",
"name": "Kayak",
"price": 275,
"id": "05af70919155f8fc"
}]
On Page load -
On changing item in select -