Sorry if this sounds dumb.
I'm having a problem similar to this question and while the accepted answer worked, it also brought up another issue: When I add a new object to the array, Angular doesn't render it.
app.controller('MainCtrl', [
'$scope',
'$filter',
'posts',
function($scope, $filter, posts) {
$scope.posts = $filter('orderBy')(posts.posts, '-votes')
}
]
My add function:
o.addPost = function(post) {
return $http.post('/posts', post).success(function(data) {
o.posts.push(data)
})
}
Are there anything I can do about it?
EDIT: I'm going with this:
o.addPost = function(post) {
return $http.post('/posts', post)
}
app.controller('MainCtrl', [
'$scope',
'$filter',
'posts',
function($scope, $filter, posts) {
$scope.posts = $filter('orderBy')(posts.posts, '-votes')
$scope.addPost = function() {
posts.addPost(param).then(function(response) {
$scope.posts.push(response.data)
})
}
]
in the factory just return the http instead of the unwrapping the promise inside the factory
o.addPost = function(post) {
return $http.post('/posts', post);
}
then call the addPost method inside the factory.And catch the promise inside the promise.
app.controller('MainCtrl', [
'$scope',
'$filter',
'posts',
function($scope, $filter, posts) {
var params = {};
posts.addPost(params).then(function(data) {
$scope.posts = $filter('orderBy')(data, '-votes')
})
}
])
angular only trigger for instance changes. If you just modify the array by push or splice, the filter won't be fired.
you can do the following way to give the array a new instance.
o.addPost = function(post) {
return $http.post('/posts', post).success(function(data) {
o.posts.push(data);
o.posts = o.posts.slice(); // this will give array a new instance and fire the filter.
})
}
Related
since I've been staring at this problem for some days now, I'm kinda new at AngularJS, I thought maybe someone here could help me. So to my problem:
I get a Typeerror when i try to save a new topic on a forum I'm creating: My controller
module.controller('newTopicController', ['$scope', '$http', 'dataService', function ($scope, $http, $window, dataService) {
$scope.newTopic = {};
$scope.save = function () {
dataService.addTopic($scope.newTopic)
.then(function () {
$window.location = "/#";
},
function () {
alert("couldnt save topic");
});
};
}]);
And my factory:
module.factory("dataService", function ($http, $q) {
var _topics = [];
var _isInit = false;
var _isReady = function () {
return _isInit;
};
var _getTopics = function () {
var deferred = $q.defer();
$http.get("/api/topics?withReplies=true")
.then(function (result) {
angular.copy(result.data, _topics);
_isInit = true;
deferred.resolve();
},
function () {
deferred.reject();
});
return deferred.promise;
};
var _addTopic = function (newTopic) {
var deferred = $q.defer();
$http.post("/api/topics", newTopic)
.then(function (result) {
var createdTopic = result.data;
_topics.splice(0, 0, createdTopic);
deferred.resolve(createdTopic);
},
function () {
deferred.reject();
});
return deferred.promise;
};
return {
topics: _topics,
getTopics: _getTopics,
addTopic: _addTopic,
isReady: _isReady
};
});
So when i try to add a topic to the forum I just get "TypeError: Cannot read property 'addTopic' of undefined" in the controller, right where dataService.addTopic($scope.newTopic) is.
I also have another controller who also uses the factory, but that shouldnt be a problem right?
Thanks for your time.
This seems incorrect:
module.controller('newTopicController', ['$scope', '$http', 'dataService', function ($scope, $http, $window, dataService) {...}
Change it to:
module.controller('newTopicController', ['$scope', '$http', '$window', 'dataService', function ($scope, $http, $window, dataService) {...}
I already have seem other topics with this kind of issue, but no one could help me... So here is my issue:
I have a navbar with a button for search, this buttons makes and get request from a webservice and returns a json object which must be apply to fill an table list. The problem is, my button and my table are in separated controllers, and it does work like I expected.
var app = angular.module('clientRest', []).controller('lista', ['$scope', 'loadLista', function($scope, loadLista) {
$scope.contatos = loadLista.getContatos();
}]).controller('pesquisa', ['$scope', '$http', 'loadLista', function($scope, $http, loadLista) {
$scope.listar = function() {
$http.get("http://localhost/wsRest/index.php/contato").success(function(response) {
loadLista.setContatos(response);
});
};
}]).service('loadLista', function() {
var contatos = [];
return {
getContatos: function() {
return contatos;
},
setContatos: function(c) {
contatos = c;
}
};
});
My code...
When I call listar() from pesquisa controller I need to send received data to $scope.contatos from lista controller to make my ng-repeat work, everything with a single click.
How can I do it?
Thanks everyone
Better to use a service to share data between two controllers / modules as this might be the best approach. You can refer the code segment given below to understand the concept.
angular.module('app.A', [])
.service('ServiceA', function() {
this.getValue = function() {
return this.myValue;
};
this.setValue = function(newValue) {
this.myValue = newValue;
}
});
angular.module('app.B', ['app.A'])
.service('ServiceB', function(ServiceA) {
this.getValue = function() {
return ServiceA.getValue();
};
this.setValue = function() {
ServiceA.setValue('New value');
}
});
In order to trigger the data receipt event, you may use
Broadcast / emit messages - with #broadcast / #emit
An angular promise with a call back
Controller initiation function to reload the previously read information from a service
.controller('MyController', function($scope, ServiceA) {
$scope.init = function() {
$scope.myValue = ServiceA.getValue();
};
// Call the function to initialize during Controller instantiation
$scope.init();
});
Use $rootScope.$emit to emit a change event when setting the variable and use $on to get the value in the lista controller. I used customListAr here just to demostrate a button click. Does this help?
var app = angular.module('clientRest', [])
.controller('lista', ['$scope', 'loadLista', '$rootScope',
function($scope, loadLista, $rootScope) {
console.log(loadLista);
$scope.contatos = loadLista.getContatos();
$rootScope.$on('change', function() {
$scope.contatos = loadLista.getContatos();
});
}
])
.controller('pesquisa', ['$scope', '$http', 'loadLista',
function($scope, $http, loadLista) {
$scope.listar = function() {
$http.get("http://localhost/wsRest/index.php/contato").success(function(response) {
loadLista.setContatos(response);
});
};
$scope.customListAr = function() {
loadLista.setContatos(["item 1" , "item 2", "item 3"]);
}
}
])
.service('loadLista', ['$rootScope',
function($rootScope) {
var contatos = [];
return {
getContatos: function() {
return contatos;
},
setContatos: function(c) {
contatos = c;
$rootScope.$emit('change');
}
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="clientRest">
<div ng-controller="lista">
<ul>
<li ng-repeat="a in contatos">{{a}}</li>
</ul>
</div>
<div ng-controller="pesquisa">
<button ng-click="customListAr()">Click Me</button>
</div>
</div>
Your problem is that when you do $scope.contatos = loadLista.getContatos(); you are setting a static value, and angular is unable to effectively create a watcher for that object because your setContatos method is creating a new object each time. To get around this, have the controller's scope hold a reference to the parent object and then it will automatically have a watcher on that object.
var app = angular.module('clientRest', [])
.controller('lista', ['$scope', 'loadLista', function($scope, loadLista) {
$scope.contatos = loadLista.contatos;
}])
.controller('pesquisa', ['$scope', '$http', 'loadLista', function($scope, $http, loadLista) {
$scope.listar = function() {
$http.get("http://localhost/wsRest/index.php/contato"
).success(function (response) {
loadLista.contatos.data = response;
});
};
}])
.service('loadLista', function() {
var lista = {
contatos: {},
};
return lista;
});
// view:
<ul>
<li ng-repeat="contato in contatos.data">
{{ contato }}
</li>
</ul>
I'm an angular newby. I'm hoping to pass params to a service that fetches data form a server depending on those params.
for example, if I want to pass a book name string and then use it in the service to concatenate with the request url. The documentation does not show clearly in this subject and I could not find helpful examples in other resources.
Let say, this is the controller:
app.controller('BookController', ['$scope', '$routeParams', 'books', function($scope, $routeParams, books) {
// sending params to books service before a successful return
books.success(function(data) {
$scope.book = data[$routeParams.bookId];
});
and this is the service
app.factory('books', ['$http', function($http) {
// var url = 'http://...' + ParamFromController + '.json'
return $http.get(url)
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
So, how can I send params to 'books' service and then use it in the service?
Thanks a lot in advance.
You can declare your service as:
app.factory('books', ['$http', function($http) {
// var url = 'http://...' + ParamFromController + '.json'
return {
getVal: function(url,options){
return $http.get(url,options)
}
}
}]);
and use it in your controller and provide appropriate params to pass into 'books' service:
app.controller('BookController', ['$scope', '$routeParams', 'books', function($scope, $routeParams, books) {
// sending params to books service before a successful return
books.getVal('api/activity.json',{'name':'abc'}).success(function(data) {
$scope.book = data[$routeParams.bookId];
});
Also, dont use the .success() callback both in your service and controller function. The books service is returning a promise($http returns a promise implicitly) and you can handle that in controller.
Right now you are returning the promise / result of the $http as the service instance.
Services are not meant to work this way. You should return an object that holds several properties / methods that define your service:
app.factory('books', ['$http', function($http) {
var instance = {
getBook: function(bookId) {
return $http.get(...);
}
}
return instance;
}
In the controller you can then use the books service as follows:
books
.getBook($routeParams.bookId)
.then(function (result) { ... });
app.factory('books', ['$http', function($http) {
var booksService = {};
booksService.getBook = function(bookId){
{
return $http.get(url, bookId);
};
return booksService;
}]);
and in your controller
app.controller('BookController', ['$scope', '$routeParams', 'books', function($scope, $routeParams, books) {
books.getBook($routeParams.bookId).success(function(data) {
$scope.book = data;
});
I'm new to angular and I have a user route which I'm attempted to resolve the user object for before rendering the view. I've injected $q and deferred the promise, however, the view is still loading before the promise is returned.
Route:
.when('/user/:userId', {
templateUrl: 'user/show.html',
controller: 'UserController',
resolve: {
user: userCtrl.loadUser
}
})
Controller
var userCtrl = app.controller('UserController', ['$scope',
function($scope){
$scope.user = user; // User is undefined
// This fires before the user is resolved
console.log("Fire from the controller");
}]);
userCtrl.loadUser = ['Restangular', '$route', '$q',
function(Restangular, $route, $q) {
var defer = $q.defer();
Restangular.one('users', $route.current.params.userId).get().then(function(data) {
console.log("Fire from the promise");
defer.resolve(data);
});
return defer.promise;
}];
After looking through the Github issues, I found a similar problem and resolved it with the following:
userCtrl.loadUser = ['Restangular', '$route',
function(Restangular, $route) {
return Restangular.one('users', $route.current.params.userId).get();
}];
I have here my javascript code:
define(['controllers/controllers', 'services/alerts'], function(module) {
'use strict';
return module.controller('alerts', [
'$scope', '$http', 'alerts', function($scope, $http, alerts) {
console.log('alerts controller initialized');
$scope.settings = {};
return $scope.submit = function() {
$scope.busy = true;
console.log('scope', $scope);
return console.log('data', $scope.data);
};
}
]);
});
I tried to log the contents of $scope.data that I expect to contain the values of ng-model => data.followers but always show undefined but when I tried to log value contents of $scope, $scope.data exists. As shown in the image:
I tried initializing $scope.data but it will always return an empty array after changing the value of ng-model => data.followers. This is the code (in haml) when I initialized ng-model:
%input{:type => "checkbox", "ng-checked" => "settings.#{$key}", "ng-model" => "data.#{$key}", "ng-true-value" => "true", "ng-false-value" => "false", "ng-click" => "submit()"}
Any thoughts?
UPDATE:
Already fix this. All I did was to initialize $scope.data and used data.#{$key} in the ng-checked. That got me stuck. Noob angular programmer here.
When lazy loading Angular components, you need to use $scope.$apply(). When components are lazy loading using Require, or some other method, the functions are registered onto teh $scope outside of the $digest loop of Angular. using $scope.$apply() makes the $digest aware of your bindings, and brings them inside the app instance.
You will likely also need to use module.register.controller instead of module.controller
define(['controllers/controllers', 'services/alerts'], function(module) {
'use strict';
return module.register.controller('alerts', [
'$scope', '$http', 'alerts', function($scope, $http, alerts) {
console.log('alerts controller initialized');
$scope.settings = {};
return $scope.submit = function() {
$scope.busy = true;
console.log('scope', $scope);
return console.log('data', $scope.data);
};
$scope.$apply();
}
]);