We Keep Coding

Using an angular directive stored in a variable in thymleaf

I am working on an issue in an application that mixes angularjs and thymeleaf. I want to build a template in thymeleaf that will allow me to use a variable to specify an angular attribute directive to use.
It seems like thymeleaf does not allow variables to be used as attributes. I have tried the following:
<div th:attr="${portlet.attrDirective}">
....
</div>
Didn't work
<div th:inline="text">
<div [[${portlet.attrDirective}]]>
...
</div>
</div>
Also didn't work
Am I doing something wrong?
There also is the possiblity of they portlet.attrDirective being null.

I got it working finally using the following code:
<div th:attr="${portlet.attrDirective == null} ? nodirective : ${portlet.attrDirective}=${portlet.attrDirective}">
...
</div>
Does anyone have a more readable solution?

ng-click doesn't pass param and trigger

http://plnkr.co/edit/mZFpdHjRVrqcWYqIZSm0?p=preview
Does anyone know why the ng-click doesn't fire?
<p ng-click="getIt({{data}})"> {{data}}</p>
$scope.getIt = function(word){
alert(word);
}
I don't see typo though..

Hi Please dont use "{{}}"
See Plunker
<li ng-repeat="data in data">
<p ng-click="getIt(data)"> {{data}}</p>
</li>
http://plnkr.co/edit/UJv48vbBKBPTm6kvGw0I?p=preview

ng-click doesn't required {{}}
Please check plunker I added.
<p ng-click="getIt(data)"> {{data}}</p>
Plunker

ng-click doesn't support interpolation ({{ }}) only valid angular expressions. Use ng-click="getIt(data)"> instead

Angular-translate function not working as expected

I'm including translation to my website using angular-translate
So I have this piece of code:
<td class="nav-button">
<a href="{{button.location}}" class ="'{{button.clazz}}'" ng-click="showDetails = !showDetails" >
{{button.text}}
<div ng-show="button.subButtons.length && showDetails" ng-repeat="subButton in button.subButtons">
<a href="{{subButton.location}}" class="'{{button.clazz}}'" translate>
{{subButton.text}}
</a>
</div>
</a>
</td>
The sub-buttons appear normally and the translation works just right. But only translating the subButtons.
The problem is : I want to translate the {{button.text}} as well
But when I add the translate to the first <a>, neither the features works.
I've tried several ways to fix this but I failed.
Somebody that maybe had the same problem could help ? Thanks.

angular translate is a filter
{{button.text|translate}}

I am curious to what subButton.text contains. It needs to contain the key of the translation value that you are looking for. For example, my translations file looks like this:
{
"SUB_BUTTON": "Hello there, this is the sub button"
}
I can create a button in multiple ways.
via filter
<button>{{"SUB_BUTTON" | translate}}</button>
via directive 1
<button translate="SUB_BUTTON"></button>
via directive 2
<button translate>"SUB_BUTTON"</button>
For more info please read further on the angular-translate Docs

scope issue caused ng-click don't trigger

I uses angular ui tab (http://angular-ui.github.io/bootstrap/) and I added a delete btn inside the the js file. I can't do it with my markup because the js generate the template on the js side.
my ng-click doesn't work when I put this
<span ng-click="deleteTab()" >dlt</span>
js
$scope.deleteTab = function(){
//$scope.tabs.splice(this, 1);
alert('d');
}
within my controller. I tried to include the js on the topest and before the , nothing work. Until I try onClick. I wonder why I can't use ng-click in my situation?

If you add new HTML to the DOM without using angular, you need to $compile the HTML to let angular to bind the content and $watch changes. See the docs
$compile(element.contents())(scope);
Edit:-
Ah you can give the title as a HTML template as well,see the tabs definition
<tab ng-repeat="workspace in workspaces"
active=workspace.active>
<tab-heading>{{workspace.name}}<span ng-click="deleteTab()" >dlt</span></tab-heading>
<div ng-controller="TabsChildController" >
<div>
{{workspace.id}} : {{ workspace.name}}
</div>
<input type="text" ng-model="workspace.name"/>
</div>
</tab>
and here is the solution

that's a plunker that could solve your problem.plunker the only doubt is what workspace would you want to close, i imagine it is the last, otherwise you only need to modify the delete method.
EDIT
in this version you can delete the selected workspace, you have to controll the css, but i thin it could be a good solution
new plunker

Bind ng-models in input type checkbox

I have a problem when binding ng-models with ng-repeat in a input tag type checkbox.
I will first attach my code and then explain more in detail.
app/main.html:
<div ng-repeat="feature in features">
<input type="checkbox" ng-model="features[$index].name">{{features[$index].name}}
</div>
<br></br>
<div class="highlighter">
<span ng-class="{emo:Emotions}">Manually</span> <span ng-class="{feel:Feelings}">create</span> the <span ng-class="{emo:Emotions}">entire</span>
</div>
main.js
angular.module('webClientApp')
.controller('MainCtrl', function ($scope,$http) {
[...other variables...]
$scope.features = [{'name':'Emotions'},{'name':'Feelings'}];
[...other parts of code]
});
Let's also assume that in the main.css file there are references to the classes .emo' and.feel' respectively to highlight the target word when the user ticks the box relative to the feature.
Now, the application works correctly when I listed all the inputs one by one like the following:
<input type="checkbox" ng-model="Emotions">Emotions
<input type="checkbox" ng-model="Feelings">Feelings
but I wanted to wrap it into an ng-repeat and list the features in the controller scope, since the features I will considered will be more. When I try the code above when I tick on the box the name changes to `true'.
I have read a lot about how to bind models to an ng-repeat inside a input tag but none of the solutions apply to my case.
Can someone please help me?

I changed thigs up quite a bit from your original model but... I did get something to behave similar to what you are looking for.
HTML
<div ng-app="webClientApp">
<div ng-controller="MainCtrl">
<div ng-repeat="(feature,enabled) in features">
<input type="checkbox" ng-model="features[feature]">{{feature}}</input>
</div>
<div class="highlighter">
<span ng-class="{emo:features.Emotions}">Manually</span> <span ng-class="{feel:features.Feelings}">create</span> the <span ng-class="{emo:features.Emotions}">entire</span>
</div>
{{features}}<br>
{{features.Emotions}}<br>
{{features.Feelings}}
</div>
JS
var app = angular.module('webClientApp', []);
app.controller('MainCtrl', function($scope, $http) {
$scope.features = {Emotions: true, Feelings: true};
});
Here's the fiddle: http://jsfiddle.net/rodhartzell/8YrxQ/
Hope this helps.

(i should add this as a comment, but I don't have enough rep. yet)
There is an issue on github which concerns your issue: https://github.com/angular/angular.js/issues/1404 and the comment of caitp shows some workarounds: https://github.com/angular/angular.js/issues/1404#issuecomment-30859987
You could (also) define a new javascript object in your controller and map the elements to that.
In controller: $scope.awnsers = {};
In template: ng-model="awnsers[feature.name]"
I hope this helps

You must use ng-checked instead of ng-model.
Check out this jsfiddle
http://jsfiddle.net/fizerkhan/z5z9s/24/
ngModel and ngChecked are not meant to be used together.
ngChecked is expecting an expression, so by saying ng-checked="master". If the expression is truthy, then special attribute "checked" will be set on the element
You should be able to just use ngModel, tied to a boolean property on your model. If you want something else, then you either need to use ngTrueValue and ngFalseValue (which only support strings right now), or write your own directive.