The problem that I need to generate link on the fly since the link is set in ng-repeat. I think I need to execute custom function inside ng-repeat loop which gets data from $http and pushes link to $scope.array. Then bound href to $scope.array[someIndex]....The problem I don't know if:
it's the only way
a good design
how to implement it
Example:
HTML
<div ng-repeat-start="item in items">
the link
// here execute $scope.getUrl(item ) somehow
<div class="extra-div">
<div ng-repeat-end=""></div>
Controller:
$scope.arrayOfUrls= [];
$scope.getUrl = function(url){
$http.get(url).then(
function(data){
arrayOfUrls.push(data.link);
}
)
}
How to execute getUrl during ng-repeat cycle?
PS. I cannot bound href directly to getUrl function since there is $http which eventually result in infinite digest loop.
Also promises can be returned not in order so expecting that first call to getUrl will push link to $scope.arrayOfUrls[0] is false assumption.
UPDATE:
As #Claies suggested I trie to prefetch links like this:
Contoller executes $scope.loadFeed();
$scope.loadFeed = function() {
http.jsonp('feed url').then(function(res) {
$scope.feeds = res.data.responseData.feed.entries;
$scope.feeds.forEach(function(e) {
// prefetch content and links for each feed
//hook new entryStateUrl property to feed objects
e['entryStateUrl'] = $scope.getEntryStateUrl(e.link); // e['entryStateUrl'] is undefined
})
})
}
}
$scope.getEntryStateUrl = function(inputUrl) {
$http.get(inputUrl).then(function(data) {
// do stuff
return data.link;
});
}
}
Now seems like I am trying pre-fetch urls but getting undefined for e['entryStateUrl']...
The problem maybe about assigning scope variable when $http is not done getting results... Also it seems like there are nested promises: $http.jsonp and inside it $http.get.
How to fix it?
As this requires UI enhancement, a directive would be a good approach. How about a directive like this ( JSFiddle here ). Please note that I am calling $window.open here - you can replace this with whatever the application requires. :-
todoApp.directive('todoLinks', ['$window',function ($window) {
var directive = {};
directive.restrict = 'A';
directive.transclude = 'true';
directive.scope = { ngModel: '=ngModel', jsOnClick:'&' };
directive.template = '<li ng-repeat="item in ngModel">{{item.name}}</li>';
directive.link = function ($scope, element, attributes) {
$scope.openLink = function (idx) {
$window.open($scope.ngModel[idx].link); //Replace this with what your app. requires
if (attributes.jsOnClick) {
//console.log('trigger post jsOnClick');
$scope.jsOnClick({ 'idx': idx });
}
};
};
return directive;
}]);
When the controller fills the todo items like this:-
todoApp.controller("ToDoCtrl", ['$scope','$timeout','dbService',function($scope, $timeout, dbService)
{
$scope.todo=[{"name":"google","link":"http://www.google.com"},{"name":"bing","link":"http://www.bing.com"},{"name":"altavista","link":"http://www.altavista.com"}];
}]);
Usage of this directive is simple:-
<div todo-links ng-model="todo"></div>
Related
I've built a custom directive in my app which utilizes D3.js. I want to be able to make an API call to load more data when a user clicks on a node within my D3 visualization. This will require grabbing the data associated with the node which was clicked and passing it back to my controller. The controller then handles calling a function to retrieve more data.
To get started I'm simply trying to log the data associated with the node a user clicked in my controller. My problem is that this data is undefined in my controller.
Relevant directive code:
angular.module('gameApp')
.directive('gmLinkAnalysis', gmLinkAnalysis);
gmLinkAnalysis.$inject = ['$location', 'd3'];
function gmLinkAnalysis($location, d3) {
var directive = {
restrict: 'E',
templateUrl: '/app/gmDataVis/gmLinkAnalysis/gmLinkAnalysis.directive.html',
scope: {
data: '=',
logNode: '&'
},
link: function(scope) {
...
function click(d) {
scope.logNode(d);
}
}
};
return directive;
}
HTML:
<gm-link-analysis data="connections.users" log-node="connections.logNode(d)"></gm-link-analysis>
Relevant controller code:
angular.module('gameApp')
.controller('ConnectionsController', ConnectionsController);
function ConnectionsController() {
var vm = this;
...
vm.logNode = function(d) {
console.log(d);
};
}
If I replace d in my html with a string such as "hello world" (log-node="connections.logNode('hello world')") it is properly logged. So clearly my issue lies in not properly passing my data as the parameter in my html. How would I go about doing so?
you need to specify the parameter in the call:
so in your directive it should be
function click(d) {
scope.logNode({d: d})
}
here is an example:
http://jsfiddle.net/heavyhorse/7983y06k/
You may pass a model attaching some methods into the directive but I personally prefer using $.broadcast service to keep my codebase cleaner.
Directive
function click(d) {
$rootScope.$broadcast('someEvent', d);
}
Controller
angular.module('gameApp')
.controller('ConnectionsController', ConnectionsController);
function ConnectionsController() {
var vm = this;
vm.$on('someEvent', function(event, data) {
console.log(data)
});
}
If you still think that passing methods around would make the trick for you, here is a simple example passing a method to the directive via a data model
I am working on a section of an AngularJS (1.4.2) app and trying to get my head around how to get a controller updated data from a service when its data changes.
I have set up this plunker to demonstrate the problem. I hope the example doesn't seem too convoluted, but in the app I have a main tables view like the one in the plunker, but with five tabs, each with its own partial html file and controller. Right now there's one service that holds all the fields data, much like in the plunker. The idea is that users can check the box next to a given field to activate/deactivate it as it suits their data, and only active fields should be persisted in the database, thus the service returning filtered data to the controller. The verifyFields() function in MainCtrl simulates the save function in my app, and the controller should be populating the newConnectionData object with updated data from the fields service.
I've included a pre to show that the service model data does indeed update when the checkbox is checked and unchecked or when the input value changes. But I've so far been unable to get the data to update in the main controller.
I tried to incorporate separately in the plunker solutions from this stack overflow question that suggests returning a function rather than a primitive from the service:
test.service('fields', function() {
...
var fields = this;
return {
...
activeOrders : function() { return filteredOrders },
activeShipment : function() { return filteredShipment },
activeActivity : function() { return filteredActivity }
}
test.controller('MainCtrl', ['$scope', '$rootScope', 'fields',
function($scope, $rootScope, fields) {
...
$scope.activeShipment = function () {
return fields.activeShipment();
};
$scope.activeActivity = function () {
return fields.activeActivity();
};
...and this one that suggests using a $watch:
$scope.$watch(function () { return fields.activeOrders() }, function (newVal, oldVal) {
if (typeof newVal !== 'undefined') {
$scope.activeOrders = fields.activeOrders();
}
});
$scope.newConnectionData = {};
...
$scope.verifyFields = function () {
$scope.newConnectionData = {
orders : $scope.activeOrders,
shipment : $scope.activeShipment(),
activity : $scope.activeActivity()
}
...
}
...but neither has thus far solved the issue of updating the data in the controller. If you have any suggestions, I would be much obliged. Thank you for your time!
let the service expose data as properties. Don't over complicate usage in controller. Just use directly. If you need to show data in html, add reference to the service in $scope.
test.service('fields', function() {
...
var fields = this;
return {
...
activeOrders : filteredOrders ,
activeShipment : filteredShipment ,
activeActivity : filteredActivity
In controller
test.controller('MainCtrl', ['$scope', '$rootScope', 'fields',
function($scope, $rootScope, fields) {
$scope.fields = fields;
In template
{{fields.activeShipment}}
It looks like you may need to recalculate your _.where with the function calls.
Your factory service's would have lines like:
activeOrders : function() { return _.where(fields.ordersSchema, {active: true} ); },
Here is what I ended up with.
I am trying to get the http request result to my child controller.
I have something like
<div ng-controller = "parentCtrl">
<button ng-click="callApi()">click me</button>
<div ng-controller = "childCtrl">
<div>{{productDetail}}</div>
</div>
</div>
angular.module('App').controller('parentCtrl', ['$scope','myFactory',
function($scope, myFactory) {
$scope.callApi = function() {
myFactory.request(id)
.then(function(data) {
$scope.productDetail = data
//do something in parent controller here....
})
}
}
]);
angular.module('App').controller('childCtrl', ['$scope',
function($scope) {
//I am not sure how to get the productDetail data here since it's a http request call.
}
]);
angular.module('App').factory('myFactory', function($http) {
var service = {};
service.request = function(id) {
return createProduct(id)
.then(function(obj) {
productID = obj.data.id;
return setProductDetail(productID)
})
.then(getDetail)
.then(function(productDetail) {
return productDetail.data
})
}
var createProduct = function(id) {
return $http.post('/api/product/create', id)
}
var setProductDetail = function(id) {
return $http.post('/api/product/setDetail', id)
}
var getDetail = function() {
return $http.get('/api/product/getDetail')
}
return service;
});
I was able to get the request result for my parentCtrl but I am not sure how to pass it to my child controller. Can anyone help me about it?
Thanks!
Potential approaches:
1) Inject myFactory into the child controller as well.
2) Access the parent scope directly from within childCtrl:
$scope.$parent.productDetail
3) If wanting to access from HTML
$parent.productDetail
Above assumes you are wanting to access that value specifically separate from a potential version on the child scope (existing code doesn't show that).
If it's a child scope, and nothing on the child scope (or a scope in between) is named productDetail, and you're not setting a primitive value in the child scope with that name, then you should be able to see the value directly through prototypical inheritance (but any of the three scenarios listed could force the need for a reference through the parent).
I have a service that is making an AJAX request to the backend
Service:
function GetCompaniesService(options)
{
this.url = '/company';
this.Companies = undefined;
this.CompaniesPromise = $http.get(this.url);
}
Controller:
var CompaniesOb = new GetCompanies();
CompaniesOb.CompaniesPromise.then(function(data){
$scope.Companies = data;
});
I want my service to handle the ".then" function instead of having to handle it in my controller, and I want to be able to have my controller act on that data FROM the service, after the promise inside the service has been resolved.
Basically, I want to be able to access the data like so:
var CompaniesOb = new GetCompanies();
$scope.Companies = CompaniesOb.Companies;
With the resolution of the promise being handled inside of the service itself.
Is this possible? Or is the only way that I can access that promise's resolution is from outside the service?
If all you want is to handle the response of $http in the service itself, you can add a then function to the service where you do more processing then return from that then function, like this:
function GetCompaniesService(options) {
this.url = '/company';
this.Companies = undefined;
this.CompaniesPromise = $http.get(this.url).then(function(response) {
/* handle response then */
return response
})
}
But you'll still have use a promise in the controller, but what you get back will have already been handled in the service.
var CompaniesOb = new GetCompanies();
CompaniesOb.CompaniesPromise.then(function(dataAlreadyHandledInService) {
$scope.Companies = dataAlreadyHandledInService;
});
There is no problem to achieve that!
The main thing you have to keep in mind is that you have to keep the same object reference (and in javascript arrays are objects) in your service.
here is our simple HTML:
<div ng-controller = "companiesCtrl">
<ul ng-repeat="company in companies">
<li>{{company}}</li>
</ul>
</div>
Here is our service implementation:
serviceDataCaching.service('companiesSrv', ['$timeout', function($timeout){
var self = this;
var httpResult = [
'company 1',
'company 2',
'company 3'
];
this.companies = ['preloaded company'];
this.getCompanies = function() {
// we simulate an async operation
return $timeout(function(){
// keep the array object reference!!
self.companies.splice(0, self.companies.length);
// if you use the following code:
// self.companies = [];
// the controller will loose the reference to the array object as we are creating an new one
// as a result it will no longer get the changes made here!
for(var i=0; i< httpResult.length; i++){
self.companies.push(httpResult[i]);
}
return self.companies;
}, 3000);
}}]);
And finally the controller as you wanted it:
serviceDataCaching.controller('companiesCtrl', function ($scope, companiesSrv) {
$scope.companies = companiesSrv.companies;
companiesSrv.getCompanies();
});
Explanations
As said above, the trick is to keep the reference between the service and the controller. Once you respect this, you can totally bind your controller scope on a public property of your service.
Here a fiddle that wraps it up.
In the comments of the code you can try uncomment the piece that does not work and you will see how the controller is loosing the reference. In fact the controller will keep having a reference to the old array while the service will change the new one.
One last important thing: keep in mind that the $timeout is triggering a $apply() on the rootSCope. This is why our controller scope is refreshing 'alone'. Without it, and if you try to replace it with a normal setTimeout() you will see that the controller is not updating the company list.
To work around this you can:
don't do anything if your data is fetched with $http as it calls a $apply on success
wrap you result in a $timeout(..., 0);
inject $rootSCope in the service and call $apply() on it when the asynchronous operation is done
in the controller add a $scope.$apply() on the getCompanies() promise success
Hope this helps!
You can pass the $scope into GetCompanies and set $scope.Companies to the data in the service
function GetCompaniesService(options,scope)
{
this.url = '/company';
this.Companies = undefined;
this.CompaniesPromise = $http.get(this.url).then(function(res) {
scope.Companies = res;
});
}
You have to be careful about the order in which you then use the data. That's kind of the reason behind a promise to begin with.
I hope someone can help me. I have not been able to figure this one out.
I wrote a directive (see below) to dump a pre-written ul-list on a page based on html data that I retrieved async from a database server. Both the Directive and The Service work.
I assumed that the "then" in "MenuService.getMenuData().then" would force a wait until the data arrived to the directive but some how the directive completes and shows the '3empty' message before the data arrived, which indicates that the directive completed earlier. I know I could put a timeout delay but that is not good. Do you have a suggestion as to what could the problem be?
The other technique I used was to put a ng-show="dataarrived" and set the dataarrived to true only when the promised completed. But same issue.
The purpose of this directive is to retrieve the Nav menu list from the serve and display it on the index.html but It does Not matter if I put this code in a controller or in a service or directive I get the same result. It shows nothing. It is particular to displaying it in the index.html before any other view is displayed.
Here is my directive if it make sense.
TBApp.directive('tbnavMenu', function ($compile, MenuService) {
var tbTemplate = '3empty';
MenuService.getMenuData().then(function (val) {
tbTemplate = val;
});
var getTemplate = function () {
return tbTemplate;
}
var linker = function (scope, element, attrs) {
element.html(tbTemplate).show();
$compile(element.contents())(scope);
}
return {
restrict: "E",
replace: true,
link: linker,
controller: function ($scope, $element) {
$scope.selectedNavMenu = GlobalService.appData.currentNavMenu;
$scope.menuClicked = function ($event, menuClicked) {
$event.preventDefault();
$scope.selectedNavMenu = menuClicked;
$scope.tbnavMenuHander({ navMenuChanged: menuClicked });
};
$scope.isSelected = function (menuClicked) {
return $scope.selectedNavMenu === menuClicked;
}
},
scope: {
tbnavMenuHander: '&'
}
}
}
I could be incredibly wrong but if your service is returning an $http object at the getMenuData method then these lines:
MenuService.getMenuData().then(function (val) {
tbTemplate = val;
});
should change to either:
MenuService.getMenuData().then(function (val) {
tbTemplate = val.data;
});
or
MenuService.getMenuData().success(function (val) {
tbTemplate = val;
});
My personal recomendation is to use the .then option as it enables the concatenation of more promises.