Develop Reference

Angular Material $mdDialog - Can't access 'this' items in confirm function

I'm trying to use the confirm function of an angular material $mdDialog to clear an array and then log this array to the console, but there seems to be an issue with accessing 'this' objects/arrays/expressions/functions within the $mdDialog function itself, with the console saying that whatever item references is undefined, even if used previously in other controller functions.
Does the $mdDialog directive have an issue with controllerAs syntax?
-
Controller:
app.controller('notificationsController', function($scope, $state, $http, $document, $mdDialog, $filter, $timeout) {
this.selectedNotification = null;
this.notifications = [
{
title: 'Notification One',
description: 'Description...',
time: '2017-10-27T16:39:32+00:00',
importance: 'Low',
read: false
},
etc...
$scope.clearNotifications = function(ev) {
var confirm = $mdDialog.confirm()
.parent(angular.element('body'))
.clickOutsideToClose(true)
.title('Are you sure you want to clear all notifications?')
.textContent('This action cannot be undone.')
.ariaLabel('Confirm notifications list clearance')
.ok('Yes')
.cancel('No')
.targetEvent(ev)
$mdDialog.show(confirm).then(function() {
$scope.status = 'All notifications deleted';
console.log($scope.status);
this.notifications.length = 0;
console.log(this.notifications);
}, function() {
$scope.status = 'Notifications list not cleared';
console.log($scope.status);
})
}

The this in:
$mdDialog.show(confirm).then(function() {
...
this.notifications.length = 0; // <---- here
...
}, function() {
...
})
refers to the promise resolve function of the promise returned by $mdDialog.show(), if you wanted to access the controller's notifications member you'd have to create a var that refers to the controller's this:
app.controller('notificationsController', function($scope, $state,
$http, $document, $mdDialog, $filter, $timeout) {
var _this = this; // <--- Now _this is the controller
this.notifications = [
{
title: 'Notification One',
description: 'Description...',
time: '2017-10-27T16:39:32+00:00',
importance: 'Low',
read: false
},
etc...
$scope.clearNotifications = function(ev) {
...
$mdDialog.show(confirm).then(function() {
...
_this.notifications.length = 0; //<--- using _this and not this
...
}, function() {
...
})
}

unable to inject a service in controller

I am using requireJS for my angularjs app.
common.service.js
define(function () {
var coreModule = angular.module('coreModule');
coreModule.config(['$provide', function ($provide) {
$provide.factory("CommonService", CommonService);
}]);
CommonService.$inject = ["$http", "$q", "$window"];
function CommonService($http, $q, $window) {
var service = {};
service.sharedValue;
return service;
}
});
page1.controller.js
define(function () {
var coreModule = angular.module('coreModule');
coreModule.controller('Page1Controller', ['$scope', "CommonService", function ($scope, CommonService) {
// Q2: common service
$scope.commonService = CommonService;
}]);
});
Now When I am running my app, it throws me below error:
Error: [$injector:unpr] Unknown provider: CommonServiceProvider <- CommonService <- Page1Controller
any inputs?

Your core module should have empty dependencies injected
var coreModule = angular.module('coreModule',[]);
Also in page1. controller you dont have to declare the module again, you can just use
angular.module('coreModule')
.controller('Page1Controller', ['$scope', "CommonService", function ($scope, CommonService) {

Define config
Define the service
Define the controller, inject the service, use the dependency in function declaration etc. As you would know, both are needed, after all you need the those handles, else what's the point in injecting.
Define a module, define module dependencies. NOTE that the service has to be defined before controller. If you reverse the order, you will get an error, probably that's what is happening here. Without full code, I can't tell.
bootstrap angular.
Finally working plunkr: http://plnkr.co/edit/CE9enkgW3KASx8pf5vdb?p=preview
define('config',[],function(){
function config($routeProvider) {
$routeProvider.when('/home', {templateUrl: 'tpl.home.html', controller: 'HomeController'})
.otherwise({redirectTo: '/home'});
}
config.$inject=['$routeProvider'];
return config;
});
define('dataSvc',[], function(app){
function factoryFunc ($q, $timeout){
var svc = {getData: getData};
return svc;
function getData() {
console.log('executing function');
var d = $q.defer();
$timeout(function(){
console.log("firing timeout");
d.resolve({name:"test", data:[1, 2, 3, 4]});
}, 750);
return d.promise;
}
}
factoryFunc.$inject=['$q', '$timeout'];
return factoryFunc;
});
define('HomeController',[], function() {
function HomeController($scope, dataSvc) {
$scope.name = "Mahesh";
dataSvc.getData().then(function(result){
$scope.data=result;
console.log($scope.data);
});
}
HomeController.$inject=['$scope','dataSvc'];
return HomeController;
});
define('coreModule', ['config', 'dataSvc', 'HomeController']
, function(config, dataSvc, HomeController){
var app = angular.module('app', ['ngRoute','ngResource']);
app.config(config);
app.factory('dataSvc',dataSvc);
app.controller('HomeController', HomeController);
});
require(['coreModule'],
function() {
angular.bootstrap(document, ['app']);
}
);
Refer also,
https://www.sitepoint.com/using-requirejs-angularjs-applications/
http://beletsky.net/2013/11/using-angular-dot-js-with-require-dot-js.html

Angular promises

I am running into an asynchronous issue with my stats controller. I have a controller that queries the db and returns the objects. In this controller I use the filter to get the ones with the platform Facebook and I put this into $rootScope.facebookObjects.
First controller:
app.controller('statsCtrl', function ($scope, $log, $http, $timeout, $filter, Data, $rootScope) {
Data.get('stats').then(function(data){
$scope.stats = data.data;
$scope.currentPage = 1; //current page
$scope.filteredItems = $scope.stats.length; //Initially for no filter
$scope.totalItems = $scope.stats.length;
$scope.list_pages = [
{
id: '5',
name: '5'
}, {
id: '10',
name: '10'
}, {
id: '20',
name: '20'
}, {
id: '50',
name: '50'
}, {
id: '100',
name: '100'
}
];
$scope.maxSize = 5;
$rootScope.facebookObjects = $filter('filter')($scope.stats, { platform: "facebook" });
$rootScope.twitterObjects = $filter('filter')($scope.stats, { platform: "twitter" });
});
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
});
I have a second controller that uses the $rootScope.facebookObjects to populate the chart. The problem is I need to wait until the $rootScope.facebookObjects has a value. Currently my console log shows undefined. I am looking into promises but I am a little unsure which controller to use it in and how to properly use it.
Second Controller:
app.controller("PieCtrl", function ($scope, $rootScope, $timeout, $log) {
$log.log('facebook - '+$rootScope.facebookObjects.length);
});

$rootScope.$watch('facebookObjects', function(newValue, oldValue) {
//do your job
});
while you could use $watch to watch it, but i'm not sure it's a good way to share data between the controllers, and even more data is acync.

I have created an example for you with angular factory:
HTML:
<div ng-app="jsfiddle">
<div ng-controller="MainCtrl">
Data: {{data}}<br>
</div>
<div ng-controller="SecondCtrl">
Data: {{data}}<br>
</div>
</div>
Angular:
var app = angular.module('jsfiddle', []);
app.factory('myService', function($http) {
return {
async: function() {
return $http.get('https://api.myjson.com/bins/1v21f');
}
};
});
app.controller('MainCtrl', function( myService,$rootScope, $scope, $timeout) {
$scope.data = "oron";
myService.async().then(function(d) {
$timeout(function() {
$rootScope.data = d;
}, 1000);
});
});
app.controller('SecondCtrl', function($rootScope, $scope, $timeout) {
$scope.test = $rootScope.data;
});
MainCtrl is calling myService and store the response on the $rootScope.
then the when the value is ready it will update the data object on the SecondCtrl.

Thank you everyone for your help. Here is what I came up with based off of your answers.
First Controller:
$scope.facebookObjects = $filter('filter')($scope.stats, { platform: "facebook" });
$scope.twitterObjects = $filter('filter')($scope.stats, { platform: "twitter" });
$scope.$broadcast('update_chart_controller', {
fb: $scope.facebookObjects,
tw: $scope.twitterObjects
});
Second Controller:
$scope.$on("update_chart_controller", function(event, args) {
$scope.data = [args.fb.length, args.tw.length];
});

Angular js display name based on selected item and url path

I am starting out on the angular seed. I have a json file that displays items like the below.
{
"id":"1",
"name":"Spain",
"abbrev":"esp"
}
When I click on a country in the list I want to the display the details such as the name for this item.
I have this working as shown below.
/* app.js */
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', ['ngRoute','myApp.controllers','myApp.services'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'templates/view1.html',
controller: 'CountryCtrl'
});
}])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/:name', {
templateUrl: 'templates/view2.html',
controller: 'CountryCtrl'
});
}])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/'});
}]);
/* services.js */
angular.module('myApp.services', [])
.factory('Countries', ['$http', function($http) {
var Countries = {};
Countries.name = '';
Countries.listCountries = function () {
return $http.get('../api/countries');
},
Countries.ChangeName = function (value) {
Countries.name = value;
}
return Countries;
}]);
/* controllers.js */
angular.module('myApp.controllers', [])
.controller('CountryCtrl', ['$scope', 'Countries', '$location', function($scope, Countries,$location) {
listCountries();
function listCountries() {Countries.listCountries()
.success(function (data, status, headers, config) {
$scope.countries = data.countries;
})
.error(function(data, status, headers, config) {
$scope.status = 'Unable to load data: ' + error.message;
});
}
$scope.name = Countries.name;
$scope.changeView = function(countryName,indx){
$location.path(countryName);
$scope.name = Countries.ChangeName(countryName);
}
}]);
/* templates/view1.html */
<ul>
<li ng-repeat="country in countries">
<div ng-click="changeView(country.name,$index)">{{country.name}}</div>
</li>
</ul>
/* templates/view2.html */
{{name}}
What I can't get to work is that if I go to http://www.example.com/app/#/ then navigate to spain in the list then I get taken to http://www.example.com/app/#/esp and {{name}} gets outputted as esp.
However if I navigate straight to http://www.example.com/app/#/esp without first clicking on spain in the list I get no value in my $scope.name
How can I achieve this?
I want the name to also be set based on the location path if it is available.
I know that $location.$$path will get me /esp however I don't really think this is the best idea to use this incase the url builds out to something bigger eg http://www.example.com/app/#/esp/events
can I some how access the index or id of the item so that I can then access the data like
{{countries[0].name}}
where 0 is id of esp - 1.
What is the best approach?

Mate, there are a couple of issues with your app.
Your service retains "state" although is only used to retrieve information
You're using the same controller to 2 different views (bad practice)
$scope.status = 'Unable to load data: ' + error.message; --> Error is not defined
There are a couple of js errors too, like strayed commas and stuff
Anyways, here's a revised version of your code. Fiddle
// Instantiate your main module
var myApp = angular.module('myApp', ['ngRoute']);
// Router config
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'templates/view1.html',
controller: 'CountryListCtrl'
})
.when('/:id', {
templateUrl: 'templates/view2.html',
controller: 'CountryCtrl'
})
}
]);
// Your Factory. Now returns a promise of the data.
myApp.factory('Countries', ['$q',
function($q) {
var countriesList = [];
// perform the ajax call (this is a mock)
var getCountriesList = function() {
// Mock return json
var contriesListMock = [{
"id": "0",
"name": "Portugal",
"abbrev": "pt"
}, {
"id": "1",
"name": "Spain",
"abbrev": "esp"
}, {
"id": "2",
"name": "Andora",
"abbrev": "an"
}];
var deferred = $q.defer();
if (countriesList.length == 0) {
setTimeout(function() {
deferred.resolve(contriesListMock, 200, '');
countriesList = contriesListMock;
}, 1000);
} else {
deferred.resolve(countriesList, 200, '');
}
return deferred.promise;
}
var getCountry = function(id) {
var deferred = $q.defer();
if (countriesList.length == 0) {
getCountriesList().then(
function() {
deferred.resolve(countriesList[id], 200, '');
},
function() {
deferred.reject('failed to load countries', 400, '');
}
);
} else {
deferred.resolve(countriesList[id], 200, '');
}
return deferred.promise;
}
return {
getList: getCountriesList,
getCountry: getCountry
};
}
]);
//Controller of home page (pretty straightforward)
myApp.controller('CountryListCtrl', ['$scope', 'Countries',
function($scope, Countries) {
$scope.title = 'Countries List';
$scope.countries = [];
$scope.status = '';
Countries.getList().then(
function(data, status, headers) { //success
$scope.countries = data;
},
function(data, status, headers) { //error
$scope.status = 'Unable to load data:';
}
);
}
]);
// controller of Country page
// Notice how we use $routeParams to grab the "id" of our country from the URL
// And use our service to look for the actual country by its ID.
myApp.controller('CountryCtrl', ['$scope', '$routeParams', 'Countries',
function($scope, $routeParams, Countries) {
$scope.country = {
id: '',
name: '',
abbrev: ''
};
var id = $routeParams.id;
Countries.getCountry(id).then(
function(data, status, hd) {
console.log(data);
$scope.country = data;
},
function(data, status, hd) {
console.log(data);
}
);
}
]);

In your "CountryCtrl", if you include $routeParams and use $routeParams.tlaname, you will have access to the tlaname. You can then use that to initialize your data.

How to use angular factory, $resource

I am building my first app with angular and currently I have my service defined as
angular.module('mean.testruns').factory('Testruns', ['$resource', function($resource) {
return $resource('testruns/:testrunId', {
testrunId: '#_id'
}, {
update: {
method: 'PUT'
}
});
}]);
I have added another url on the rest server as
'/testcases/:testcaseId/testruns'
How do I include this in the above testruns factory function?
I currently have my controller as
$scope.findOfTestcase = function() {
//Need to correct this
Testruns.query({testcaseId:$stateParams.testcaseId}, function(testruns) {
$scope.testruns = testruns;
});
};
$scope.findOne = function() {
Testruns.get({
testrunId: $stateParams.testrunId
}, function(testrun) {
$scope.testrun = testrun;
});
};

Not totally sure about this, but you could try something like:
angular.module('mean.test').factory('Testruns', ['$resource', function($resource) {
return {
runs: $resource('testruns/:testrunId', ...),
cases: $resource('testcases/:testcaseId', ...)
}
}]);
And use it like this:
app.controller('ctrl', ['$scope', 'Testruns',
function($scope, Testruns) {
$scope.testCases = Testruns.cases.query();
}
])