I use drupal as backend and as texts manager.
So I want to insert string keys in html and then send request with all keys for getting real text in current lang.
So I want to make some stuff like
<h4 ng-gettext>MODULE_Y__STRING1</h4>
<span ng-gettext>MODULE_X__STRING1</span>
<span ng-gettext>MODULE_X__STRING3</span>
Then in NgGettext directive I want to send request with all strings like
var strings = [];
EACH.('ng-gettext', function(){
strings.push($(this).html());
});
$.when('/api/gettexts', {keys: strings}).then(function(){
// here I need to replace all keys with texts.
});
Is there any ellegant Angular way to do this or maybe some plugins?
You can use the angular-translate module for that. It has a few plugins for asynchronous loading (from server for example), see here : https://angular-translate.github.io/docs/#/guide/12_asynchronous-loading
You'll have something like :
$translateProvider.useUrlLoader('api.php/translations.json');
Related
I am using Salesforce as the back end and my users can get some notifications that could contain an tag with a link to somewhere. This being said I have used $sce in the controller to do a function like this:
vm.to_trusted = to_trusted;
function to_trusted(html_code) {
return $sce.trustAsHtml(html_code);
}
In the front end I am using it as such:
<p ng-bind-html="vm.to_trusted(message.body)"></p>
An example of the returned message.body is
Click Here to Fill out your Profile. It will allow you
On localhost this works awesome with the link being shown and not the tag. On Salesforce, this is not the case with the above being shown instead. Any ideas as to why this is not working?
UPDATE:
Yes I do have ngSanitize included :)
The Salesforce #dispatch requests serialize text in an odd manner.
If the content of a Salesforce string is: 'Things' you will see in Angular that you've received: <a href="$quot;>Things<a>
The solution I've found is, in your controller:
function to_trusted(html_code) {
// Cause the <g; etc become '<'
return $('<textarea />').html(html_code).text();
}
Because Salesforce.
I'm a beginner with Angular and I want to make a ng-repeat of images in a folder. All my images have different names so I don't see how I can make a ngSrc for all the images.
Hope I am clear enough.
You can try something like this.
Grab all the image filenames and store it in a javascript array with in the javascript for your controller. I'm assuming you would be doing this on your server side and return JSON back to client through an API or Service.
In you controller, the result would look like this.
$scope.myImages = ["image1.jpg", "image2.jpg"];
You have many options now. One way is to write a little function that returns the full path and call it from ng-src.
$scope.getImagePath = function(imageName) {
return "http://yoursite/location/" + imageName;
};
<div ng-repeat="myImage in myImages">
<img ng-src="{{getImagePath(myImage)}}"/>
</div>
Similar post here
Try to give some code snippets using JSFiddle or Plunker next time as it would clearly show what you are trying to do.
[Update]
I don't know what language/framework you are using on the server side but to get all the files in a directory is very easy. Below are examples using node.js and C# respectively.
http://www.csharp-examples.net/get-files-from-directory/
How do you get a list of the names of all files present in a directory in Node.js?
If you are using ASP.NET WEB API, then just return the array back from the Get method in your API Controller, and then call that API from Angular directly.
There are tons of examples on how to do this. Just do some research and you should be fine.
I have a set of files in a server which I am looping though and constructing a JSOn and saving it as a separate file. I am using python for this. Works quite well. Now the scope is the number of files in the directory will increase/ change throughout the day..and I am running the script every 10 min to rewrite the json...the file name stays same and i am calling it in a single page html document using angular.js..Again fairly simple...But now I am having problem when the JSON is changing I am not seeing any change on the page unless I reload the page. Could I do something about this?
With angular I am using
$http('something.json').success(callback function with some argument data)
and in the markup something like
<ul>
<li ng-repeat="x in data">{{x.id}}</li>
</ul>
Your call to $http is one-time operation which happens after page load like this:
$http('something.json').success(function(data){
$scope.data = data;
});
angular is kickstarted
ng-controller containing $http request is evaluated and request for 'something.json' is sent
...
when your json arrives, your success function is called with data from json
view (html template) is updated with new data
Angular keeps your model (eg $scope.data) and UI (expressions in template) up to date, but it doesn't update external resources.
If you want to periodically poll for changes in 'something.json'
you can use $timeout service as suggested in JaKXz's comment.
I have an HTML page that's been generated on the server. It contains data similar to this:
<ul>
<li>Banana</li>
<li>Apple</li>
<li>Pear</li>
</ul>
Is it possible to "angularize" (or "post-compile") such data to obtain the same behavior as if the list had been generated with:
<ul>
<li ng-repeat="item in items">{{item.name}}</li>
</ul>
That way, my list would be sortable, filterable, etc.
Why would I want to do that?! ;-)
I'm using Drupal as my page generator and for multiple reasons I'd like to keep it that way (my content is translatable, themable with Drupal's theme functions, etc.)
Having the initial version of the page fully rendered by the server makes it indexable by search engines. The AngularJS behaviors are mostly just UI enhancements.
I'd like to avoid an additional roundtrip to the server just to re-transfer the same data.
Caveats:
I'm not just asking how to implement the desired behavior with AngularJS + Drupal (I could expose Drupal's data via an endpoint to which AngularJS would send requests). Instead, I'm asking how to recycle data that's already in the HTML to turn it into an AngularJS model (without resorting to ngInit, ideally).
What I am asking breaks the MVC pattern, I know.
In case you're curious, the site is http://ng-workshop.com/ (it's a collection of AngularJS resources and tutorials).
Thanks!
One way to provide angular the data is to echo out the php data to the page as a javascript object above the other included scripts on the page.
$dbResult = ['f1', 'f2', 'f3'];
echo "<script type='text/javascript'> var php_data = " . json_encode($dbResult) . ";</script>";
then somewhere in your angular js code...
$scope.items = php_data || [];
You may want to place the data in a namespaced javascript object to prevent any kind of stomping on.
Example:
PHP -> echo "myApp.page.data =" . json_encode($dbResult) . ";"
Angular -> $scope.items = myApp.page.data || [];
Just want to know your idea wht will be my approach on how to store external json data file into a services so that i can inject it into different controllers
Thanks
Try to use ngTranslation module.
with this service you can store the static content(some json file, etc..) outside of the code, and not dirty your controllers/services...
EXAMPLE:
JS:
angular.module('app', ['ng-translation'])
.config(['ngTranslationProvider', function(ngTranslationProvider) {
ngStaticProvider
.setDirectory('/assets/static')
.setFilesSuffix('.json')
.langsFiles({
demo1: 'demo1',
demo2: 'demo2'
})
}]);
//inject to controller
function PanelController($scope, translateFilter) {
$scope.panelContent = translateFilter('key','fileName')
}
HTML:
<!-- use as a filter {{ key | translate: fileName }}-->
<p>{{ key | translate: fileName }}</p>
<!-- use ng-translate directive, similar to ng-bind-->
<p ng-translate="file(key)"></p>
Well, it all depends on the architecture of your application but I guess you could create a factory or service that will store data then simply inject that factory wherever needed.
If the data needs to be persistent, I would use something like localStorage. If it's a really small amount of data and your app cannot support HTML5, I would use cookies.
The more you elaborate the more accurate answer you will get.
Have look at the angularjs tutorial. It specifically address this issue.
First go though http://docs.angularjs.org/tutorial/step_05 where you include the json in controller.
Then follow http://docs.angularjs.org/tutorial/step_11 where it is moved to service.
$http.get() can be used to retrive data from REST urls as well.