We Keep Coding

How I could correct an $injector:unpr error with Angular 1.6 / MVC 4.6 / UI-Grid

I'm working on a Web-App with Angular 1.6 / MVC 4.6 / E.F 6.0. I've also added UI-Grid. It's working well. I'm trying to create a custom filter, like this part of documentation. My objective is to create the same custom filter than "Age". It's working on local, but not when I publish the WebApp. I have this two errors :
Possibly unhandled rejection: canceled
Error: [$injector:unpr] http://errors.angularjs.org/1.6.2/$injector/unpr?p0=nProvider%20%3C-%20n%20%3C-%20myCustomModalCtrl
I'm pretty sure that it's related to controller / directive that I've added for this custom filter. I have readed Angular JS help page, but I don't know How I could correct this error, and Why it's working only localy
JS
var PrintersApp = angular.module('PrintersApp', ['ui.grid', 'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.moveColumns', 'ui.grid.autoResize']);
var Now = new Date();
PrintersApp.controller('PrintersController', ['$scope', '$http', '$filter', 'uiGridConstants',
function ($scope, $http, $filter, uiGridConstants) {
var store = $scope;
$scope.highlightFilteredHeader = function (row, rowRenderIndex, col, colRenderIndex) {
if (col.filters[0].term) {
return 'header-filtered';
} else {
return '';
}
};
var ExportDate = $filter('date')(Now, "MM-dd-yyyy");
$scope.gridOptions = {
enableFiltering: true,
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
enableGridMenu: true,
enableSelectAll: false,
exporterMenuPdf: false,
exporterCsvFilename: ExportDate + '-PrintersDataExport.csv',
exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
},
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
},
columnDefs: [
{ field: 'Date', enableFiltering: false, enableColumnMenu: false, enableSorting: false, width: 160 },
{ field: 'User', headerCellClass: $scope.highlightFilteredHeader, enableHiding: false, width: 160 },
{ field: 'Pc', headerCellClass: $scope.highlightFilteredHeader, enableHiding: false, width: 120 },
{ field: 'PrinterSrv', enableFiltering: $scope.highlightFilteredHeader, enableHiding: false, },
{
field: 'PrinterName',
filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><div my-custom-modal></div></div>',
width: 320,
},
{
field: 'Default', filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [{ value: 'true', label: 'true' }, { value: 'false', label: 'false' }, ]
},
headerCellClass: $scope.highlightFilteredHeader, enableColumnMenu: false, enableSorting: false, width: 150
},
]
};
$http.get('/AuditPrinters/GetAuditPrintersData')
.then(function (response) {
var datatest = response.data;
datatest.forEach(function addDates(row, index) {
TimeStamp = (row.Date).replace('/Date(', '').replace(')/', '')
row.Date = $filter('date')(TimeStamp, "MM/dd/yyyy HH:mm:ss");
});
$scope.gridOptions.data = datatest;
}, function (err) {
alert("Erreur" + rr);
});
$scope.toggleFiltering = function () {
$scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;
$scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
};
}])
PrintersApp.directive('myCustomDropdown', function () {
return {
template: '<select class="form-control" ng-model="colFilter.term" ng-options="option.id as option.value for option in colFilter.options"></select>'
};
})
PrintersApp.controller('myCustomModalCtrl', function ($scope, $compile, $timeout) {
var $elm;
$scope.showPrintersNameModal = function() {
$scope.listOfPrinters = [];
$scope.col.grid.appScope.gridOptions.data.forEach( function ( row ) {
if ($scope.listOfPrinters.indexOf(row.PrinterName) === -1) {
$scope.listOfPrinters.push(row.PrinterName);
}
});
$scope.listOfPrinters.sort();
$scope.gridOptions = {
data: [],
enableColumnMenus: false,
onRegisterApi: function( gridApi) {
$scope.gridApi = gridApi;
if ( $scope.colFilter && $scope.colFilter.listTerm ){
$timeout(function() {
$scope.colFilter.listTerm.forEach(function (PrinterName) {
var entities = $scope.gridOptions.data.filter( function( row ) {
return row.PrinterName === PrinterName;
});
if( entities.length > 0 ) {
$scope.gridApi.selection.selectRow(entities[0]);
}
});
});
}
}
};
$scope.listOfPrinters.forEach(function (PrinterName) {
$scope.gridOptions.data.push({ PrinterName: PrinterName });
});
var html = '<div class="modal" ng-style="{display: \'block\'}"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">Filter Ages</div><div class="modal-body"><div id="grid1" ui-grid="gridOptions" ui-grid-selection class="modalGrid"></div></div><div class="modal-footer"><button id="buttonClose" class="btn btn-primary" ng-click="close()">Filter</button></div></div></div></div>';
$elm = angular.element(html);
angular.element(document.body).prepend($elm);
$compile($elm)($scope);
};
$scope.close = function() {
var printersname = $scope.gridApi.selection.getSelectedRows();
$scope.colFilter.listTerm = [];
printersname.forEach(function (PrinterName) {
$scope.colFilter.listTerm.push(PrinterName.PrinterName);
});
$scope.colFilter.term = $scope.colFilter.listTerm.join(', ');
$scope.colFilter.condition = new RegExp($scope.colFilter.listTerm.join('|'));
if ($elm) {
$elm.remove();
}
};
})
PrintersApp.directive('myCustomModal', function () {
return {
template: '<label>{{colFilter.term}}</label><button ng-click="showPrintersNameModal()">...</button>',
controller: 'myCustomModalCtrl',
};
});

Not sure if this helps, but your issue might be related with the declaration of the myCustomModalCtrl controller. This declaration, compared with the other ones is missing the full qualified declaration for the injected services:
PrintersApp.controller('myCustomModalCtrl', function ($scope, $compile, $timeout) { [..] });
Should be:
PrintersApp.controller('myCustomModalCtrl', ['$scope', '$compile',
'$timeout', function ($scope, $compile, $timeout) { [..] }]);
When your code is minified, the parameter $scope will be renamed to, for example, a instead. Which will cause the error you've received, since there's no service named a declared in the $injector.
In order to avoid this issue, we must tell the $injector the correct service name to inject for each parameter we request in our controller.
Take a look at this article for more information.

AngularJS update data in ng-repeat from http request

I searched for solution but I didn't found an answer. What is my problem, on my category view I have init function which makes http request and get all category from database. I use that records and make ng-repeat. But when I open modal with form to make new category I can't update that ng-repeat view when modal close and see new category. I organize my controller, service and view in this way:
view
<div class="row main-body no-padding" ng-init="adminCtr.initCategory()">
<div class="col-lg-4 margin-bottom-20" ng-repeat="category in adminCtr.allCategories">
<div class="header-panel">
<span class="category-headline">{{category.name}}</span>
</div>
<div class="main-form">
{{category.id_cat}}
</div>
</div>
</div>
controller:
function addCategory() {
$mdDialog.show({
templateUrl: 'app/views/modal/addCategory.html',
clickOutsideToClose: false,
controller: 'adminController',
controllerAs: 'adminCtr'
});
}
function initCategory() {
adminService.initCategory().then(function (data) {
vm.allCategories = data.categories;
})
}
function createCategory(category) {
adminService.createCategory(category).then(function (data) {
if(data.success == false) {
vm.categoryError = data.error;
} else {
vm.categoryError = '';
cancelModal();
initCategory();
$location.path('/admin/category');
$timeout(function () {
$mdToast.show(
$mdToast.simple()
.textContent('Kategorija je uspešno kreirana')
.position('top right')
.theme("success-toast")
.hideDelay(5000)
);
}, 500);
}
})
}
function cancelModal() {
$mdDialog.hide();
}
service:
function createCategory(category) {
return $http.post('api/admin/createCategory', {
category: category,
idUser: $rootScope.globals.currentUser.idUser,
token: $rootScope.globals.currentUser.token
}).then(function(response) {
return response.data;
});
}
function initCategory() {
return $http.post('api/admin/getAllCategories', {
idUser: $rootScope.globals.currentUser.idUser,
token: $rootScope.globals.currentUser.token
}).then(function(response) {
return response.data;
});
}
I tried to call again init function to update vm.allCategories but without any success.
Does any know some solution?
P.S. I tried with $scope.apply() but I got error, btw I use angular 1.6.2.

in the service remove the promise. you are caching the response in the controller using promise. So need to add a promise in the service also.
function initCategory() {
return $http.post('api/admin/getAllCategories', {
idUser: $rootScope.globals.currentUser.idUser,
token: $rootScope.globals.currentUser.token
})
}
in the controller update like this
function initCategory() {
adminService.initCategory().then(function (res) {
vm.allCategories = res.data.categories; // in the response data comes inside data property.
})
}

Change your HTML template like below:
<div class="col-lg-4 margin-bottom-20" ng-repeat="category in adminCtr.allCategories track by category.id_cat">
and your JS
function initCategory() {
adminService.initCategory().then(function(data) {
$scope.$evalAsync(function(){
vm.allCategories = data.categories;
});
})
}
Demo
angular.module('myApp', []);
angular
.module('myApp')
.controller('MyController', MyController);
MyController.$inject = ['$scope', '$timeout'];
function MyController($scope, $timeout) {
var vm = this;
var a = [{
"id_cat": "1",
"name": "fgfdgfd"
}, {
"id_cat": "2",
"name": "dfgfdgdf"
}, {
"id_cat": "3",
"name": "dfgfdgdffdgdfg"
}];
var b = [{
"id_cat": "1",
"name": "fgfdgfd"
}, {
"id_cat": "2",
"name": "dfgfdgdf"
}, {
"id_cat": "3",
"name": "dfgfdgdffdgdfg"
}, {
"id_cat": "4",
"name": "dfgfdgdfg"
}, {
"id_cat": "5",
"name": "dfdsfsdfsdfsd"
}, {
"id_cat": "6",
"name": "sdfdsfsdfsdfsdfsd"
}, {
"id_cat": "7",
"name": "dfgfdgfgfgfdgdf"
}];
vm.allCategories = a;
$timeout(function() {
$scope.$evalAsync(function() {
vm.allCategories = b;
});
}, 2000);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController as vm">
<div ng-repeat="category in vm.allCategories track by category.id_cat">
{{category.name}}
</div>
</div>

AngularJs Ui-Grid cannot show the Data and external filter with buttons and functions is not working with Complex JSON

Ui-Grid external filtering is not working and also didn't show me the data of an object Json. I am retreiving a data from server and it has complexity.
HTML--->
<div ng-controller="MainCtrl">
<input ng-model='filterValue'/>
<button ng-click='filter()'>Filter</button>
<button type="button" class="btn btn-sm btn-default"
ng-click="changeFilter('')">Filter Clear</button>
<button type="button" class="btn btn-sm btn-default"
ng-click="changeFilter('1')">Filter (1)</button>
<button type="button" class="btn btn-sm btn-default"
ng-click="changeFilter('5')">Filter (5)</button>
<button type="button" class="btn btn-success"
ng-disabled="!gridApi.grid.options.multiSelect"
ng-click="selectAll()">Select All</button>
<button type="button" class="btn btn-success"
ng-click="clearAll()">Clear All</button>
<br />
<div ui-grid="gridOptions" ui-grid-selection="" class="grid"></div>
<hr />
</div>
AngularJS---->
var app = angular.module('app', [
'ngTouch', 'ui.grid', 'ui.grid.selection']);
app.controller('MainCtrl', [
'$scope', '$http', '$log', '$timeout', 'uiGridConstants',
function ($scope, $http, $log, $timeout, uiGridConstants) {
$scope.gridOptions = {
enableFullRowSelection: true,
modifierKeysToMultiSelect: true,
enableRowSelection: true,
enableSelectAll: true,
showGridFooter:true,
enableFiltering: true
};
$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'title'},
{ name: 'createdDate' },
{ name: 'description' }
];
$scope.gridOptions.multiSelect = true;
$scope.filter = function() {
$scope.gridApi.grid.refresh();
};
$scope.singleFilter = function( renderableRows ){
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach( function( row ) {
var match = false;
[
'id',
'title',
'createdDate',
'description',
].forEach(function( field ){
if (row.entity[field].match(matcher)) {
match = true;
}
});
if (!match) {
row.visible = false;
}
});
return renderableRows;
};
$http.get('test.json')
.success(function(data) {
console.log(data);
$scope.gridOptions.data = data;
$timeout(function() {
if($scope.gridApi.selection.selectRow){
$scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
}
});
});
$scope.info = {};
$scope.selectAll = function() {
$scope.gridApi.selection.selectAllRows();
};
$scope.clearAll = function() {
$scope.gridApi.selection.clearSelectedRows();
};
$scope.changeFilter = function(val){
$scope.filterValue = val;
$scope.gridApi.grid.refresh();
}
$scope.gridOptions.onRegisterApi =
function(gridApi){
//set gridApi on scope
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
});
$scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 );
gridApi.selection.on.rowSelectionChangedBatch($scope,function(rows){
var msg = 'rows changed ' + rows.length;
$log.log(msg);
});
};
}])
Server Response and simplified version of complexity--->;
[ {
"id": 1882,
"eventTypeId": 1,
"occuredDate": "2016-06-06T00:00:00",
"title": "Event Refresh",
"description": "Test for auto refresh",
"studyId": 2,
"statusId": 1,
"severityId": 3,
"priorityId": 2,
"status": 1,
"createdDate": "2016-06-06T13:53:42",
"$$hashKey": "uiGrid-0014"
},
{
"id": 1879,
"eventTypeId": 2,
"occuredDate": "2016-06-03T00:00:00",
"title": "Test one more timeout",
"description": "testing timeout",
"studyId": 4,
"statusId": 5,
"severityId": 2,
"priorityId": 2,
"status": 1,
"createdDate": "2016-06-06T13:53:42",
"$$hashKey": "uiGrid-001A"
},
{
"id": 1882,
"eventTypeId": 1,
"occuredDate": "2016-06-06T00:00:00",
"title": "Event Refresh",
"description": "Test for auto refresh",
"studyId": 2,
"statusId": 1,
"severityId": 3,
"priorityId": 2,
"status": 1,
"createdDate": "2016-06-06T13:53:42",
"$$hashKey": "uiGrid-0014"
}]
Here is an object i can reach any data of the server response but when the time has come to show data on ui-grid its kind of ignoring the whole data like as in the plunker that i created.
here is the not working plunker i have created one. Please have a look at that what I am missing here? and please update the plunk if any solution has come.
thanks

The code row.entity[field].match(matcher) is problematic as there is no match function, you need to use .test:
$scope.singleFilter = function( renderableRows ){
var matcher = new RegExp($scope.filterValue);
renderableRows.forEach( function( row ) {
var match = false;
['id','title','createdDate','description',].forEach(function( field ){
if (matcher.test(row.entity[field])) {
match = true;
}
});
if (match) {
row.visible = true;
}
else{
row.visible = false;
}
});
return renderableRows;
};
It's worth noting that your filter is in fact case-sensitive so if you search for 'event' you won't get anything, but 'Event' will get you three results.
Working plnkr

AngularJS: How to count filters items

In my example jsfidle you can see my doubt.
My jsfiddle
How do I get it to count the number of it and only appears to me once and not repeatedly.
My Html:
<section class="left" style="border-right:1px">
<div class="filter">
Pant Size
<div>
<div ng-repeat="professionalarea in pantsGroup">
<b><input type="checkbox" ng-model="usePants[professionalarea.description]"/>{{professionalarea.description}}</b>
<span>({{(filteredPlayers | filter:professionalarea).length}})</span>
</div>
</div>
</div>
</section>
My controller
$scope.$watch(function () {
return {
players: $scope.players,
usePants: $scope.usePants
}
}, function (value) {
var selected;
//here i want call professionalarea.description and don't pants
$scope.pantsGroup = uniqueItems($scope.players, 'professionalarea');
var filterAfterPants = [];
selected = false;
for (var j in $scope.players) {
var p = $scope.players[j];
for (var i in $scope.usePants) {
if ($scope.usePants[i]) {
selected = true;
if (i == p.professionalarea.description) {
filterAfterPants.push(p);
break;
}
}
}
}
if (!selected) {
filterAfterPants = $scope.players;
}
$scope.filteredPlayers = filterAfterPants;
}, true);
Example Image
Image

Added new function to get distinct items i.e. getDistinctValue
Please find following snippet..
(function () {
'use strict';
var myApp = angular.module('myApp', []);
var uniqueItems = function (data, key) {
var result = new Array();
for (var i = 0; i < data.length; i++) {
var value = data[i][key];
console.log(value);
if (result.indexOf(value) == -1) {
result.push(value);
}
}
return result;
};
function getDistinctValue(items) {
var lookup = {};
var result = [];
for (var item, i = 0; item = items[i++];) {
var name = item.professionalarea.description;
if (!(name in lookup)) {
lookup[name] = 1;
result.push(name);
}
}
return result;
}
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function (file, uploadUrl) {
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
})
.success(function () {
})
.error(function () {
});
}
}]);
myApp.controller('myCtrl', ['$scope', function ($scope) {
$scope.usePants = {};
$scope.players = [
{
name: 'Bruce Wayne',
shirt: 'XXL',
pants: '42',
professionalarea: {
idAreaProfissional: 1,
description: "IT"
},
shoes: '12'
}, {
name: 'Bruce Wayne',
shirt: 'XXL',
pants: '28',
professionalarea: {
idAreaProfissional: 1,
description: "test"
},
shoes: '12'
}, {
name: 'Bruce Wayne',
shirt: 'XXL',
pants: '35',
professionalarea: {
idAreaProfissional: 1,
description: "IT"
},
shoes: '12'
}
];
// Watch the pants that are selected
$scope.$watch(function () {
return {
players: $scope.players,
usePants: $scope.usePants
}
}, function (value) {
var selected;
//here i want call professionalarea.description and don't pants
$scope.pantsGroup = getDistinctValue($scope.players);
var filterAfterPants = [];
selected = false;
for (var j in $scope.players) {
var p = $scope.players[j];
for (var i in $scope.usePants) {
if ($scope.usePants[i]) {
selected = true;
if (i == p.professionalarea.description) {
filterAfterPants.push(p);
break;
}
}
}
}
if (!selected) {
filterAfterPants = $scope.players;
}
$scope.filteredPlayers = filterAfterPants;
}, true);
$scope.$watch('filtered', function (newValue) {
if (angular.isArray(newValue)) {
console.log(newValue.length);
}
}, true);
}]);
myApp.filter('groupBy',
function () {
return function (collection, key) {
if (collection === null) return;
return uniqueItems(collection, key);
};
});
})();
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="app.js" type="text/javascript"></script>
<style>
.gridStyle {
border: 1px solid rgb(212, 212, 212);
margin-left: 15px;
width: 97%;
height: 130px;
float: left;
font-weight: normal;
padding: 35px 10px 10px 10px;
}
</style>
<title>Upload </title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div>
<section class="left" style="border-right:1px">
<div class="filter">
Pant Size
<div>
<div ng-repeat="professionalarea in pantsGroup">
<b><input type="checkbox" ng-model="usePants[professionalarea]" />{{professionalarea}}</b>
<span>({{filteredPlayers.length}})</span>
</div>
</div>
</div>
</section>
<section class="right" style="border-right:1px">
<div>
<ul>
<li ng-repeat="player in filteredPlayers | filter:query">
<p><b>Player: {{player.name}}</b></p>
<p>Shirt Size: {{player.shirt}} Pant Size: {{player.pants}} Shoe Size: {{player.shoes}}</p>
</li>
</ul>
</div>
</section>
</div>
</div>
</body>
</html>

html is not compile on append new child in angular js

I am trying to insert a node dynamically, but the appended html is not getting compiled correctly.
This is the code on Fiddle.
<body ng-app="app">
<div ng-controller="appController">
{{tittle}}
<div name="name" ng-repeat="d in data" ng-click="click(d.id)" id="div{{d.id}}">{{d.id}} click me</div>
</div>
(function () {
var app = angular.module('app', []);
app.controller('appController', function ($scope, $compile) {
$scope.tittle = "test";
$scope.data = [{ id: 1, child: [{name:'renjith'}] }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }];
$scope.click = function (data, $element) {
debugger;
var scope = { id: "12" };
angular.element(document.querySelector("#div" + data)).append($compile("<div ngTransclude>{{d.id}}</div>")($scope.data));
}
});
})();