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.
Related
I am loading an angular application in a webview as shown below
WebView.loadUrl(String url, Map<String, String> additionalHttpHeaders)
I maintain a state for this in the angular application and show the content accordingly.Is there a way i can read the headers sent fromt he webview in my angular application ?
state in my angular code
$stateProvider.state('external', {
abstract: true,
template: '<div ui-view></div>'
});
$stateProvider.state('external.details', {
url: '/details?vendor&id&title',
templateUrl: '/partials/details',
controller: 'DetailsCtrl',
});
No, you can't use Javascript to access request headers (it's by design, so not an angularjs issue).
The only way to do this is for the server to read the request headers and then pass them on to the angular application in some form.
Why not use the URL query string optional parameters if you want to pass values to the ui-router?
I am having on angular page.
Page1 :
In which configuration is
.when('/Test/:empId', {
templateUrl:'/Templates/test.html',
controller: 'TestController'
})
.when('/Test/:depId', {
templateUrl:'/Templates/test1.html',
controller: 'Test1Controller'
})
Then i have another page
Page 2:
This page is normal mvc razor page having button
Button1
On click of that button i want to show modal which contain
Page1
So i wrote
$.ajax({
url: '/Templates/test.html',
type: 'GET',
success: function (responce) {
var elem = angular.element(responce);
$('#testModalBody').html(elem);
$('#testModal').modal('show');
//console.log('test responce');
}
});
I am just getting html response, it does not execute 'TestController'
So the scope variables are not getting values declared in TestController, and not able to see data html pages. Just see static html template.
Instead of using $.ajax, you should use $http service of Angular JS.
Instead of doing like this $('#testModalBody'), you can use ng-bind-html.
To bind HTML please read below link.
https://www.w3schools.com/angular/ng_ng-bind-html.asp
$stateProvider.state('abc', {
url: '/:id',
modal: true,
template: '<abc></abc>'
})
can I have custom html tag in template property?, e.g. 'abc', I was looking at someone else code but I don't understand how this works, I do have abc.html processed by gulp templatecache stuff. and it is loaded in a modal dialog correctly.
the file is at 'src/app/components/abc/abc.html', how come the template 'abc' knows which html to load? I suppose there must be a definition for 'abc' directive somewhere? but I can't find it.
I finally figured how it works, turns out the custom html tag is defined by a 'component' and there is some naming convention making this work.
http://blog.grossman.io/angular-1-component-based-architecture-2/
https://docs.angularjs.org/guide/component-router
Can I have custom html tag in template property
Yes, of course. Templates can use custom directives no matter how they are defined.
There should be an 'abc' directive somewhere in your module code or one of its dependencies.
See this SO question to be able to list the registered directives of your module and submodules in the console.
Yes, you can use custom html. UI Router provides you two choices, either you give the template or the templateUrl, which for the first one you have to write your html in a string literal, and latter you can set a html file location.
using template with string literal:
$stateProvider.state('abc', {
url: '/:id',
modal: true,
template: '<abc></abc>' // this is correct!
})
using templateUrl with html files.
$stateProvider.state('abc', {
url: '/:id',
modal: true,
templateUrl: '/path/to/abc.html' // if you have a file named `abc.html` in directory `path/to`, the template will be loaded
})
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.
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/