is it possible to do a replacement inside a HTML tag?
Template:
<input type="checkbox" disabled {{#if CompleteAndTrueConfirmation}}checked{{/if}} >
Test Data:
{
"CompleteAndTrueConfirmation": true
}
I get the error:
Unexpected character after / in tag. Expected >.
This template works but looks cumbersome:
{{#if CompleteAndTrueConfirmation}}
<input type="checkbox" disabled checked />
{{else}}
<input type="checkbox" disabled />
{{/if}}
No, it's not possible to use a Handlebars block like {{#if ... within an HTML start or end tag because it interferes with the HTML parsing in the SendGrid template editor. ☹
More info:
When I edit module HTML, paste your template, and save, I get an error:
When I edit the code again, I see the code has been modified because the editor tries to fix the HTML by making attributes out of the bits of Handlebars code:
It is possible to do substitution where the test data contains HTML (example), but that kind of defeats the purpose of using a template.
Related
I'm simply trying to get an AngularJS expression to display on screen. However, nothing shows up between the curly braces. I've inspected the app with ng-inspector and although I see an object being created with an ng-model directive, I can't display the value with the object key.
Furthermore, for testing purposes, I can't even get a simple math expression to display either.
Here's what I'm working with.
<body ng-app="angularApp">
<div ng-controller="firstCtrl">
<input ng-model="project.completed" type="checkbox">
<input ng-model="project.title" type="text" placeholder="Project Title">
<label>
{{project.title}}
1+2={{1 + 2}}
</label>
<input ng-model="project.time" type="text" placeholder="Project Time">
<label for="">{{project.time}}</label>
<button ng-click="helloWorld()">Press Me</button>
</div>
</body>
...and here's the controller:
angular.module('angularApp', [])
.controller('firstCtrl', function($scope) {
$scope.helloWorld = function() {
console.log('You just pressed the button.');
};
$scope.project = {
completed :false,
title :'test',
};
});
The only thing that shows up in the label is '1+2='.
UPDATE: After spending a ridiculous amount of time trying to debug this I have been able to get the first value of the math expression to display -- the '1'. I achieved this by adding a space around the '+' operator. Still, the full expression is not evaluating.
If you're using another templating engine, such as Twig, Liquid, or Django, the curly braces may be being stripped out. This results in the values not displaying or evaluating properly.
The solution I found is editing the interpolation characters or $interpolateProvider like so inside your controller:
angular.module('angularApp', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
})
Then, just wrap your expression in the new symbols, e.g.:
{[{ 1+2 }]}
...or
{[{ project.title }]}
I had the same issue and finally found it, simply open your web page and press f12 and view the console :) Also remove any unused css. Additionally make sure that you add the "ng-controller" in the tag or some other broad scope so its well covered within the scope.
I'm getting neither a value emitted by the template fragment nor functioning validation. My Jade template:
doctype html
html(lang='en', ng-app="Validate")
head
script(src='#{cdn_path}/angular.js/1.3.11/angular.js')
script(src='#{cdn_path}/angular.js/1.3.11/angular-messages.js')
script.
angular.module('Validate', ['ngMessages']);
body
.container
form(method="POST", action="/apply", name="myform", novalidate="")
pre myform.name.$error = {{ myform.name.$error }}
input.form-control(name="name", required="", pattern=".*[a-zA-Z].*", minlength=5)
ng-messages(for="myform.name.$error")
ng-message(when="required") Required!
ng-message(when="min") Too small!
input.btn(type='submit')
The resulting HTML: http://plnkr.co/edit/McyMXwW1b2Ae7kkwQ1sP
I'd like to avoid custom directives or much in the way of additional Javascript. What am I doing wrong?
This is happening because you didn't bind ng-model with the input :-)
<input name="name" ng-model="name" required="" pattern=".*[a-zA-Z].*" minlength="5" class="form-control">
<ng-messages for="myform.name.$error">
<ng-message when="minlength">Too small!</ng-message>
<ng-message when="required">Required!</ng-message>
Plunker:- http://plnkr.co/edit/kmNkfhdVOHQsstj6dpPT?p=preview
I just have the same issue and solved it. I want to share it so no one will waste an hour like me.
Please ensure the following:
1. Load the ngMessages module
<!-- Load Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<!-- Load ngMessages -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular-messages.min.js"></script>
2. Inject ngMessages into our application module
angular.module( "app", [ "ngMessages" ] );
3. Try newer versions
For some reason, Doug Luce's code gets working just by changing versions to e.g., 4.11!
I'm very new to angularjs and i'm trying to find a way how i can translate the following jquery into angularjs
jquery
$("element").html("some text here");
I found something like this but it wont apply
<div ng-init="obj = {greet: false}">
<ng-messages for="obj">
<ng-message when="greet">Show me</ng-message>
</ng-messages>
</div>
If i omit the description of the modules and controllers, you'll have something like that :
in the js : $scope.myValue = "a value";
in the html : <div>{{myValue}}</div>
ng-messages test if the expression is true, and show ng-message if it is.
I'm not sure, that it does what you're searching for.
i try use ng-if, but angular no compile him. Look in test code:
<ul class="tmmenu-admin-tabs-builder-panel-answer">
<li class="tmmenu-admin-tabs-builder-panel-portlet" ng-repeat="answer in answers">
<div>
<span ng-repeat="question in questions">
<label ng-repeat="answer in question.answers">
<input type="checkbox">{{question.id}}.{{answer.id+1}}
<span ng-if="test()">ddd</span>
</label>
</span>
</div>
<textarea>{{answer.text}}</textarea>
</li>
</ul>
and function test:
$scope.test = function(){
console.log('d');
return false;
}
if run this page, we can see "ddd" in "Li" despite to test return false.
Next step, i replaced at "ng-if" "ng-show" :
<ul class="tmmenu-admin-tabs-builder-panel-answer">
...
<span ng-show="test()">ddd</span>
...
</ul>
And its working, "ddd" hide. Why ng-if not working where working ng-show?
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your html file (see ngCsp).
Could be a scope problem, is there something in a child scope that might override the value for test? ng-if works fine for me (plunker). I assume that everything else is working fine, are you seeing 'd' in the console to show that your function is getting executed?
Try changing your tag to this to help debug and you should see that it is a function:
<span ng-if="test()">test is: {{test.toString()}}</span>
I think some sample code can explain my purpose.
Some html code with angular:
<div ng-init="buttons=['add','edit','delete']">
<div show-result-as-text>
<button ng-repeat="button in buttons">{{button}}</button>
</div>
</div>
You can see there is a custom directive "show-result-as-text" which I want to define. It should render the inner html code with angular directives, then show them as text.
The final html should be:
<div ng-init="buttons=['add','edit','delete']">
<div show-result-as-text>
<button>add</button>
<button>edit</button>
<button>delete</button>
</div>
</div>
And when the buttons value changes, the escaped html should also be changed.
I've tried to write one myself, but failed after 2 hours of work.
UPDATE
A live demo: http://plnkr.co/edit/fpqeTJefd6ZwVFEbB1cw
The closest thing I could think of is exemplified here: http://jsfiddle.net/bmleite/5tRzM/
Basically it consists in hiding the src element and append a new element that will contain the outerHTML of each src child.
Note: I don't like the solution but it works, so I decided to share it...