We Keep Coding

How can I output the <template /> tag to the DOM in Vue.js

I have a custom library built on Stencil that I need to integrate with Vue, and this library relies on the browser's <template /> tag.
For example, I need to render the following code to the dom:
<my-custom-list>
<template>
<my-custom-title></my-custom-title>
<my-custom-description></my-custom-description>
</template>
</my-custom-list>
my-custom-list will then get whatever is inside the template and use it for each of the items in the list.
I managed to get it to work by using the v-html directive, for example:
<my-custom-list v-html="<template><my-custom-title></my-custom-title><my-custom-description></my-custom-description></template>">
</my-custom-list>
However, I would also like to be able to use Vue components inside this template tag, like:
<my-custom-list>
<template>
<my-custom-title></my-custom-title>
<my-custom-description></my-custom-description>
<custom-vue-component></custom-vue-component>
</template>
</my-custom-list>
Some old answers online suggest using the is directive to be able to output the template tag, like <div is="template"> but that has been deprecated.
I am not even sure if this is possible, but any insights would be much appreciated.

You can use the v-pre directive to skip compilation for parts of your components.
<my-custom-list v-pre>
<template>
<my-custom-title></my-custom-title>
<my-custom-description></my-custom-description>
<custom-vue-component></custom-vue-component>
</template>
</my-custom-list>

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?

Angular, using angular material switch in a bootstrap modal (aria label issue)

I am building angular app using angular, bootstrap, and angular-material. Specificlly I'm using bootstrap-ui for angular's modals - seend here http://angular-ui.github.io/bootstrap/. I have had no problems with angular-material until now, when I place the material switches in a bootstrap modal (in the template) I am getting an aria error and they are not working.
I'm using these switches (https://material.angularjs.org/#/demo/material.components.switch)
I just have it in the body of the modal like this to test it at first -
<div class="modal-body">
<md-switch ng-model="data" aria-label="Switch 1">
Switch 1
</md-switch>
</div>
The switches work fine outside of the modal but when I open the modal the console spits out the error like so (and the switch does not work) :
ARIA: Attribute " aria-label ", required for accessibility, is missing on node <div class="md-container" md-ink-ripple="" md-ink-ripple-checkbox=""><div class="md-off"></div><div class="md-on"></div></div>
I'm not sure what to do becasue there is an aria label on the switch itself, may because the boostrap ui makes a new controller for the modal itself, it's getting confused, or not getting the proper injections? Would appreciate any help. thanks for reading

Angular-ui bootstrap don't work correctly with templates

I use angular-ui-bootstrap popover. I manually changed template of popover to support html in it. I changed ng-bind to ng-bind-html:
<div class=\"popover-content\" ng-bind-html=\"content\"></div>
I'm passing such template to popover attribute:
<span ng-click="scopeFunction()">{{somethingFromScope}}</span>
So {{somethingFromScope}} resolves and works, but ng-click function doesn't work. ng-show, ng-if (looks like any ng- directive) don't work as well.
What's the reason of it? How can I make it work?
Thanks

Just changing template is not enough
Update module dependencies like this:
angular.module('ui.bootstrap.popover', ['ui.bootstrap.tooltip', 'ui.bootstrap.bindHtml'])
And change template
<div class="popover-content" bind-html-unsafe="content"></div>
Works with angular.ui.bootstrap v0.11.0 from 2014-05-01

After researching a lot I find a solution:
If you need popover with template - use AngularStrap popover ;)

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