Could you explain me how to use Lodash _.template in order to get some value from script to .html file via {{data}} ?
For example:
In script.js I set some changes to my data object and in view.html. I want to get changed data with {{data}}
How to use lodash _.template() for this issue?
The lodash template function does not allow you to build templates from files (but you could do it when combined with Webpack). It has absolutely nothing to do with AngularJS templates. However in some situations it makes sense of using inside of AngularJS, like for example building a list of strings with a pattern or the like.
You compile a template string to a function you can call as often as you like with the values:
const executor = _.template("Hello <%= name %>, my old friend!");
console.log(executor({name: 'Alice'})); // Hello Alice, my old friend!
console.log(executor({name: 'Bob'})); // Hello Bob, my old friend!
You can also use conditional, loops, etc.: https://lodash.com/docs/4.17.15#template
Related
I'm working with an existing codebase and I need to figure out how this works:
{{'some_variable' | translate}}
It seems to correlate to some_variable in an api call but I don't see it in the controller.
In this project you are using angular-translate...
This module offers you directive, filter and a service to add translation into your application...
In the example you gave you are using translate filter (if you are not familiar with the angular filters check out documentation)...
There are some options that how angular translate get your translations but at the end it will something like javascript object like this...
{
some_variable: 'Some Variable translation'
}
translate filter will take your input 'some_variable' and find value for it from given translations (if it cannot find anything it will return key itself)...
I had print value issue in laravel view, i was trying to print $scope value inside laravel blade. I searched about and find two kind of solution.
1- Change angularjs print tag
By this method i can change angularjs print tag.
var app = angular.module('app', []);
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
app.controller('app', function ($scope, $http) {
$scope.text_print = 'this is text';
});
Now in blade i can print like <% text_print %>
2- Add # for printing angularjs $scope value
I found an up-voted answer in which #Paul A.T. Wilson says that
The easiest way to do this is to simply use # in front of your Angular code
Example #{{text_print}}
Both are working for me, actually i want to make a plugin, so which method should i use? because i'm not sure the second one is compatible with laravel old version. I want my plugin compatible with all version of laravel.
Can anyone guide me about this, i would like to appreciate. Thank You
Changing either interpolation strings for Blade or angular is the best option if you want your plugin to work with older versions of Laravel.
For angularJs you already know how to do it from here.
For Blade, inside your Laravel app's AppServiceProvider.php file add the following code in the boot function:
public function boot() {
Blade::setRawTags("[[", "]]");
// for variables and Blade
Blade::setContentTags('<%', '%>');
// for escaped data
Blade::setEscapedContentTags('<%%', '%%>');
}
Note: In my opinion it's easier to change the interpolation tags for angular as changing the interpolation tags for blade requires you to clear out the storage/framework/views folder.
Apparently there's another way to do this, but I'm not sure if it will work in older versions:
#verbatim
<div>
{{ variableOne }}
{{ variableTwo }}
</div>
#endverbatim
The verbatim annotation indicates that the section is as-is, ie: Blade will leave it out.
I am using angular 1.5 and using translate to externalize my strings to a separate json file.
The translated strings sometimes fail to load and the path of the string is displayed instead.
ex: instead of displaying "Hello World" it displays something like "greet.hello".
This is not a regular occurrence and goes away when I refresh the page.
Not sure whether this is a file load issue.
Remove the single quote.
Its should be {{greet.hello | translate}}.
it's better practice to use directive.
Angular runs every single filter twice per $digest cycle once something has changed.
So you can do directive instead:
<h1 translate="{{greet.hello}}" ></h1>
I am working on a html template and dissecting it (Suitecommerce Reference Impl to be more specific - an ERP solution which comes with webfront features).
Here's a snippet from the template.
<li>
<a href="#" data-touchpoint="customercenter" data-hashtag="#ordershistory">
<%= _('Order History').translate() %>
</a>
</li>
The % tag between normal html tags are written in backbonejs and underscorejs.
Since underscorejs functions take _.function() form, I don't get the purpse of _('string').
Any backbonejs/underscorejs developers out there?
When you call _(obj) Underscore wraps the obj argument. Then any Underscore methods can be called on the wrapped object without having to modify the prototype of obj.
It appears that one of the libraries that you are using has added the translate() method to the Underscore prototype and the _(string).translate() is the way to call that method on your string.
Here is another example of extending Underscore in a similar manner:
_.mixin({
logToConsole: function(str) {
console.log(str)
}
})
_('text to log').logToConsole()
References:
Underscore OOP (wrapping)
Underscore mixin method
It looks like a translation library, meant to translate the text into the language specified in the user's browser, possibly something like this one?
On the documentation page for translate.js, it looks like you can call the function using traditional underscore.js style, or you can send the primary argument in the underscore function:
_.translate(text...) - this is the main translate function and is also the base object (i.e. you can call _(text)). Translates the first parameter. If called with multiple parameters, it will call a "format" function with the 1st parameter translated followed by the additional parameters.
It's very common convention for translation libraries to be accessed using an underscore function (for an example, see Django): translated_text = _('Text to translate')
I would suggest looking in the scripts to see if a language translation library is in use.
I make a project in worklight used dojo mobile 1.8.1 and angularjs 1.0.1,but i got a strange problem.
Here is my html part:
<div data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props="selected:true" id="id1" ></div>
<div class="full" data-dojo-type="dojox.mobile.View" id="id2"></div>
and my JavaScript part:
require([
"dojo", "dijit/_base/manager","dojo/parser", "dijit/registry",
], function(dojo) {
dojo.ready(function() {
// dijit.byId("id1").performTransition("id2"); //////////place I
});
});
var angularApp = angular.module('app', [])
.run(['$rootScope','$templateCache','$route',
function($rootScope,$templateCache,$route) {
dijit.byId("id1").performTransition("id2");////////place II
}]);
The problem is at place I, it works well, but when I put "dijit.byId("id1")" at place II, it shows:
dijit.byId("").is not defined
The ready function is executed after dojo parsed your document & constructed the widgets you try to get using dijit.byId.
The second part is not placed within the ready function, so dojo can't find your elements yet !
Solution: Access your elements in the ready function OR do not declare them declaratively (like you did, using html code...) !
Lucian
The dojo.ready() function registers an event-handler function (callback) which will be fired after the DOM got completely parsed.
This comes in very handy if you want to be sure that every html element got rerendered as dojo-widget before you perform operations on them.
So, in your example, Code II will be executed before the dijit.byId() function has been made available by loading the necessary modules (dijit/registry, ...). Code II would only work after the dom-ready event got fired and your "dojo.ready()" function did load the required modules.
You should definately invest 5 minutes in reading what dojo.ready() is about:
http://dojotoolkit.org/reference-guide/1.8/dojo/ready.html
Sidenote:
You shouldn't use dijit.byId() any more in Dojo 1.8.1. Try using dijit.registry.byId() (you have to require the dijit/registry module).
http://dojotoolkit.org/reference-guide/1.8/dijit/registry.html#dijit-registry-byid