When i am adding static array then slider is working.
When using as below:
$scope.bestDeals = [{imagename: 'test', title: 'Best Deal 1' }, {imagename: 'test1', title: 'test' } ];
But problem is while i am getting data by using ajax like:
$http.get(baseurl + 'controller/getimagesData/').success(function(data)
{
$scope.bestDeals = data;
});
Its not working .
I have already tried another slider also but same problem i am facing..
I assume, your working on Bootstrap CSS for carousel. Just read the API docs of UI-Angular Bootstrap carousel control
I believe your success callback contains the meta data of the images uploaded. Make sure to check the log of the meta data and its absolute path.
Or try to use ng-src directive in your img tag or use $sce for contextual escaping.
Related
I was trying to use Koa.js instead of express for node.js.
In express we have used render function to fetch the html page.
I tried to access angular html page from Koa.js using the below code as below:
app.use(async function (ctx, next) {
return send(ctx, 'views/index.html', { root: ''
})
.then(() => next()) })
But the above code displays the index page as it is without styles and the ng-view datas are not rendered
Also, I tried adding co-views as below
var views = require('co-views');
var render= views(__dirname + '/views',
{ map: { html: 'swig' }});
But, I didnt get the result as expected. It also displays the page as mentioned above.
Please help to get the expected result.
Unless you have very specific requirements for serving static files, most of the time you can get away with koa-static:
import serve from 'koa-static'
// ...
app.use(serve(`${__dirname}/public`))
If you have more particular needs, you might need to edit your question.
I'm using Datatables with AngularJS and the FixedHeader plugin which works fine when the table is displayed on the page. My issue is that when I navigate to a different page (single page application) using angular UI router, the FixedHeader header still shows.
Does anybody know why this is the case?
It looks like that is an issue with the FixedHeader plugin to DataTables.
There is an angular-DataTables module at https://l-lin.github.io/angular-datatables/#/welcome, which has a page about the plugins that work with it. This page lists the FixedHeader plugin and mentions the same issue you are seeing.
See https://l-lin.github.io/angular-datatables/#/withFixedHeader.
This page says the following:
Beware when using routers. It seems that the header and footer stay in
your DOM even when you change your application state. So you will need
to tweak your code to remove them when exiting the state.
It also shows a workaround for angular-ui-router:
$stateProvider.state("contacts", {
templateUrl: 'somewhereInDaSpace',
controller: function($scope, title){
// Do your stuff
},
onEnter: function(title){
// Do your stuff
},
onExit: function(){
// Remove the DataTables FixedHeader plugin's headers and footers
var fixedHeaderEle = document.getElementsByClassName('fixedHeader');
angular.element(fixedHeaderEle).remove();
var fixedFooterEle = document.getElementsByClassName('fixedFooter');
angular.element(fixedFooterEle).remove();
}
});
I need Angular Js framework for a chrome extension.
what i already done its injected AJS script via background page.
But when i use angular directives in content script it just not working.
I also tried initializing Angular js Manually using Bootstrap command but that also didn't work.
any help would be appreciated.
Actually i am trying to convert an existing extension developed in pure JS into Ajs framework.
I injected AJs script in chrome tab from background page as below.
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.Arg == 'INIT') {
$.when(
$.ajax({
url: server + '/Cscript.js',// Content Script
dataType: 'text'
}),
$.ajax({
url: server +'/util.js',// Jquery and other 3drparty
dataType: 'text'
}),
$.ajax({
url: server +'/angular.js',
dataType: 'text'
})
).then(function(Cscript,Ujs,ang) {
chrome.tabs.executeScript(sender.tab.id, {code: Ujs[0]+ang[0]+Cscript[0], allFrames:true});
sendResponse(config);
});
}
In content script i created a sidebar div which have a top root div with properties
$("#SidePan").attr('ng-app','TApp');
$("#SidePan").attr("ng-csp", "true");
i created two controllers Ctrl1 and Ctrl2 for TApp.
And i added a Div as below in #SidePan
$("#SidePan").html('<div ng-controller="Ctrl1">{{2+3}}</div>)
This works as expected, But when i changed the #SidePan html on a buttonclick as below
$("#SidePan").html('<div ng-controller="Ctrl2">{{4+5}}</div>)
this wont evaluates the expression.Am i doing anything wrong with Ajs
$("#SidePan").html('<div ng-controller="Ctrl2">{{4+5}}</div>) won't work. AngularJS does not monitor the DOM so that it would know you manipulated it from outside.
Stop mixing up jQuery and AngularJS. You need to use $scopes, ng-click and possible some custom directive to achieve this.
I have built a multi step form following this tutorial: http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router Everything is working well.
I now want to use Twitter's typeahead.js on those forms. So I need to make the typeahead call on the input being loaded with angular-ui-router.
I noticed angular-ui-router provides a onEnter callback that gets called when the state becomes active. Making the call to the typeahead function from in there doesn't seem to work, it seems the call is made before the view is loaded (not 100% sure of that).
How can I initialize typeahead on my input field loaded with angular-ui-router?
What I tried:
.state('questionnaire.relationship', {
url: '/relationship',
templateUrl: 'questionnaire/relationship.html',
onEnter: function(){
var relationshipList = ['brother', 'sister', 'father', 'mother'];
var relationships = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: $.map(relationshipList, function(relationship) { return { name: relationship }; })
});
relationships.initialize();
$('#bloodhound .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'relationships',
displayKey: 'name',## Heading ##
source: relationships.ttAdapter()
});
alert('finished');
}
})
When entering the questionnaire.relationship state, I see the alert popup before the view. Then the view with my input loads properly, but typeahead isn't working. There are no js error in the console.
I also made sure the typeahead call is working when used outside of angular-ui-router.
Have you tried using angular ui bootstrap's typeahead? It was built for angular without the dependency on JQuery
http://angular-ui.github.io/bootstrap/
in my extjs app, i create a panel, i also add jquery to one page, however when i click the test section in this page, this page don't render test alert, it seems extjs panel forbid the jquery function. is there any solution to load both html and js to panel content.
relative code below:
var feedback=Ext.create('Ext.panel.Panel', {
title: 'Hello',
layout: 'fit',
autoScroll: true,
bodyStyle:{"background-color":"#fed"},
html: '<div id="test">test</div>',
});
....
$("#test").click(function(){
alert('test')
})
By experience, mixing jquery selector and Extjs element can be pain to manage together. I would suggest to use Ext js selector to do what you're trying to achieve in jquery, since it's pretty basic. However, if you still want to use jquery, using on() function could help, the object is maybe not rendered yet when your jquery code is reached.
$("#test").on('click', function(){
alert('test')
})