Hi I'm creating an Angular bootstrap popover, and the popover contains a directive. The user story is that when the user clicks on a row inside an ui-grid table, the popover will show. But it seems that in HTML code the data is not actually passed into the directive. Related code is here:
search.tpl.html:
<div class="gridStyle" ui-grid="vm.selectedTypes" ui-grid-resize-columns ui-grid-selection style="margin-top: 0px; z-index: 4; position: relative">
</div>
<script type="text/ng-templae" id="popover.html">
<div style="z-index:10; position: relative">
<type-view type="vm.type" domain="vm.domain" pos="{top: 0, left: 0}">
</type-view>
</div>
</script>
search.js:
//In configure
controllerAs: "vm",
...
//In controller
var vm=this;
vm.type=[...];
vm.domain=[...]; //both var get values inside
Now the popover is shown, and the directive is inside, but the values (vm.type and vm.domain) are not injected into the directive; I checked the console, and in the directive 'pos' is injected, so I suppose maybe it's because the scope is different inside a popover and directly using vm.sth will not work. How can I resolve this? Thanks!