So I'm doing something like this:
{{someFlag ? "<b>Bold Text</b>" : "<i>Italic Text</i>"}}
But as everyone knows, things don't always go that smoothly. When I included a "tag" in the inline code, AngularJS seems to completely ignored the whole thing and rendered the source code.
I tried
"\<b>.....
and
"<b>...
but they both didn't work. Any idea?
As posted in the comments, you have a few options, from worse to better imho :
First is to use ngBindHtml
<div ng-bind-html="italicOrBold('With ngBindHtml', someFlag)"></div>
$scope.italicOrBold = function(text, bold){
return $sce.trustAsHtml(bold ? '<b>Test</b>' : '<i>Test</i>');
}
Second is to use ngClass, which is not a too bad design
<div ng-class="{'text-bold' : someFlag, 'text-italic' : !someFlag}">With ngClass</div>
.text-bold{
font-weight:bold;
}
.text-italic{
font-style:italic;
}
And third and better, make a directive
<div bold-me-up="someFlag">Or even better with a directive</div>
.directive('boldMeUp', function(){
return {
template: '<div ng-class="{\'text-bold\' : boldMeUp, \'text-italic\' : !boldMeUp}" ng-transclude></div>',
restrict: 'A',
replace: true,
transclude: true,
scope: {
boldMeUp: '='
},
link: function postLink(scope, element, attrs) {
}
};
})
Plunker demo
And to answer your comment, I don't think there's a way to create tag with mustache syntax it's just not the way it has been designed, expressions (the thing between curly braces) are basically calls to controller and controllers shouldn't be used to manipulate DOM.
Related
I'm trying to validate dynamically generated inputs, but I do not know how to do this.
When I add the div that triggers the directive and inserts the inputs dynamically the div adds the 'has-error' class but does not apply the input style, anyone knows the best way to do this that I'm trying to do?
Here is the markup:
<div ng-if="conditionItem.field.id"
ng-class="{true: 'has-error'}[conditionItem.field.hasError]"
dynamic
input-router
source="conditionItem.field"
ng-click="FieldConditionsCtrl.valueTest(conditionItem.field.hasError)"
ng-required="true"
ng-model="conditionItem.situation[$index]">
</div>
Here is the directive how generate the inputs:
(function() {
'use strict';
angular
.module('applicationInputs', ['rzModule', 'focus-if', 'ui.utils.masks'])
.directive('inputRouter', inputRouter);
/** #ngInject */
function inputRouter($compile){
return {
restrict: 'EA',
scope: {
ngModel: '=',
source: '=',
placeholder: '#',
tabIndex: '='
},
link: function(scope, element, attrs) {
var canvas = angular.element(element[0]);
scope.source.editable = angular.isUndefined(scope.source.editable) ? true : scope.source.editable === true;
//used by setting to override selected field
if (angular.isDefined(attrs.dynamic)) {
scope.$watch('source', function () {
var html = '<' + scope.source.type + 'input></' + scope.source.type + 'input>';
canvas.children().detach();
canvas.append($compile(html)(scope));
});
} else {
var html = '<' + scope.source.type + 'input></' + scope.source.type + 'input>';
canvas.append($compile(html)(scope));
}
}
}
}
})();
Here is my style:
.has-error {
border-color: red
}
Try border: 1px solid red; instead of just setting border-color. Border width is 0 by default, so just setting a color isn't enough
Just a couple nitpicky-subjective style comments also:
element is already a jqLite/jquery element, so no need to call angular.element
the scope.source.editable === true assignment can be shortened to !!scope.source.editable if you really want it to be a boolean.
While clever, this sort of jquery style element building is generally a code smell in angular js. If you really want to go this route, I would build self-contained directives for your inputs and use inputRouter's template to choose. It's easier to understand, so your future self will thank you
{true: 'has-error'}[conditionItem.field.hasError] took me a minute. Just write it as {conditionItem.field.hasError: 'has-error'}
I'm a big fan of these style guides for AngularJS:
John Papa - ES5, but good advice
Todd Motto - ES6+
There's overlap, but take what you like from each.
I set a progress in my app
I want to controll The progress in angular's directive
but how can I change data-value and data-total in directive's link func?
app.html
<div class="ui indicating small progress" data-value="39" data-total="50" plan-progress>
<div class="bar">
<div class="progress"></div>
</div>
</div>
In this html, I want change data-value and data-total
I try this:
app.js
todoApp.directive('planProgress', function() {
return {
link: function(scope, elem, attrs) {
attrs.value = 10
attrs.total = 20
elem.progress();
}
};
});
But it doesn't work
so I want to know how to change it in my directive?
Use attrs.$set() in your link function and recompile the element. Also, don't forget to inject the $compile service to your directive.
In your html you've added the directive as an attribute but didn't mention it in the restrict value in your directive definition. You need to mention it in directive definition.
See the code bellow:
todoApp.directive('planProgress', function($compile) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
attrs.$set('value', 10);
attrs.$set('total', 20);
$compile(elem)(scope);
}
};
});
Simply use :
attrs["data-value"] = 10;
attrs["data-total"] = 20;
You don't want to use attrs.data-total = 20 because the - will force a subtraction.
It's always legal in javascript to use x[keyName] instead of x.keyName, and you must use this second notation when keyName is a strange key such as **$^ùjsls* or data-value. A more useful case is when the key is a variable.
On last thing : as you do, you will always rewrite the coder's inputs. It may have sense, but it's not very elegant.
is it possible to inject string into html's tag name with angular?
Something like this:
<div ng-repeat="type in types">
<bettype-{{type.id}}></bettype-{{type.id}}>
</div>
The output I need is:
<bettype-1></bettype-1>
<bettype-2></bettype-2>
I am also using polymer (this way I am creating the custom html tags).
I think the best solution would be to create a directive which creates custom elements, something like:
.directive('bettype', function($compile) {
return {
restrict: 'E',
compile: function($element, $attr) {
return function($scope, $element, $attr) {
// Create new element here with $attr.number
var number = $attr.number,
element = angular.element('<bettype-'+number+'></bettype-'+number+'>');
// Replace newly created element
$element.replaceWith(element);
$compile($element)($scope);
}
}
}
});
Not sure if that will work, but probably that's the way to go...
Note: I don't think it\s a good idea to have dashed separated elements like bettype-1..
I have a custom directive and an object myObj on the current $scope (inside an ng-repeat).
If the object has a type of html, I want to use one template:
<span ng-bind-html="myObj.html"></span>`
Otherwise I want to use a different template:
<span>{{myObj.value}}</span>`
My problem
This is invalid because a custom directive template must contain exactly one root node:
<span ng-if="myObj.type==='html'" ng-bind-html="myObj.html"></span>
<span ng-if="myObj.type!=='html'">{{myObj.value}}</span>
This is invalid because it destroys my page with extra DOM: (wrapping all my spans (there could be thousands) in unnecessary ng-switch nodes...)
<ng-switch on="myObj.type">
<span ng-switch-when="html" ng-bind-html="myObj.html"></span>
<span ng-switch-default>{{myObj.value}}</span>
</ng-switch>
My Question
Is it possible to have a directive pick it's template based on the result of a switch, without creating extra unnecessary DOM? For example, you can specify replace: true when creating a directive - is it possible to similarly have an ng-switch where the result replaces the switch tag itself?
Edit
My Directive:
return {
replace: true,
controller: 'ChunkController',
scope: {
chunk: '=deChunk'
},
templateUrl: de.partial.chunk,
link: function (scope, el, attr, ctrl) {
el.on('keydown', handleKeypress.bind(ctrl));
el.on('click', ctrl.showValue);
}
};
And its usage:
<div class="content" contenteditable="{{node.type!=='static'}}">
<div data-ng-repeat="chunk in node.chunks" data-de-chunk="chunk"></div>
</div>
With the intent that the child <div> will be replaced with the sequence of <span>s from above.
I wouldn't even bother if you are storing the html in a service just check to see if a value for myObj.html exists in the object and if it does compile and bind the html in the linker function instead of using ng-bind-html
something like this maybe:
myapp.directive('something',function($compile){
return {
link: function(scope,elem,attrs) {
var obj = scope.$eval(attrs.something);
if(obj.html) {
var html = angular.element($compile(obj.html)(scope));
elem.append(html);
} else {
//go get the data and set obj.html
}
}
}
});
I have following ng-repeat
<div class="item-post" ng-repeat="item in items">
<div class="item-content" ng-bind-html="item.text"></div>
</div>
where item.text is multi-line HTML text and it displays correctly, but I need to truncate it to max-height of item-post div (250px). And then append three dots signalizing that text is longer.
I wanted to use jquery.autoellipsis which is working for example on div with static content.
For AngularJS I have found angular-ellipsis, but is doesn't work with HTML, only plain text. I need to achieve it on HTML content.
Thanks in advance for help!
EDIT/SOLUTION:
Finally I have been able to use jquery.autoellipsis plugin using custom directive (based on asgoth's answer):
myDirectives.directive('htmlEllipsis', ['$timeout', function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$timeout(function() {
angular.element(element).ellipsis();
}, 0);
}
};
}]);
And in partial view:
<div class="item-post" ng-repeat="item in items">
<div class="item-content" ng-bind-html="item.text" html-ellipsis></div>
</div>
EDIT2:
Directive from asgoth's answer after his edit works well, using another approach than above-mentioned directive.
If I were you I would make a directive to use the jquery plugin (jquery.autoellipsis):
angular.module('myModule').directive('ellipsis', [function () {
return {
required: 'ngBindHtml',
restrict: 'A',
priority: 100,
link: function ($scope, element, attrs, ctrl) {
$scope.hasEllipsis = false;
$scope.$watch(element.html(), function(value) {
if (!$scope.hasEllipsis) {
// apply ellipsis only one
$scope.hasEllipsis = true;
element.ellipsis();
}
});
}
};
}]);
Your html is then:
<div class="item-content" ng-bind-html="item.text" ellipsis></div>
Of course, you need to include the jquery plugin in a script tag.
EDIT: I've edited the answer, so the directive will watch for the html to change (done by ngBindHtml).
Similar to the accepted answer, this alternative allows improved customization: https://github.com/dibari/angular-ellipsis