Access Aurelia custom attribute function from within nested HTML elements
<p>I have a View/View-Model pair that implements a popover custom attribute. My specific goals include dismissing the popover upon both button click within the popover itself, and from clicking anywhere else on the page. </p>

<p>I can get my doSomething() VM function to work on the element level in the view, but not within an attribute containing an element. I've explained the issue further in the code comments. I'd appreciate some guidance. Thanks!</p>

<p>blog.html</p>

<pre><code>&lt;template&gt;
&lt;require from="../popover/popover"&gt;&lt;/require&gt;

...

&lt;!-- doSomething() works here! --&gt;
&lt;button type='button' click.trigger='doSomething()'&gt;ClickMe&lt;/button&gt;

&lt;!-- doSomething() does not work here! --&gt;
&lt;!-- `click.trigger`/`click.delegate` does not trigger anything, while `onclick` shows
     "Uncaught ReferenceError: doSomething is not defined" --&gt;
&lt;span class="glyphicon glyphicon-star" popover="title.bind: blogpost.title; placement.bind: 'top'" 
data-content='&lt;button type="button" click.trigger="doSomething()"&gt;ClickMe&lt;/button&gt;' &gt;&lt;/span&gt;

...
&lt;/template&gt;
</code></pre>

<p>blog.ts</p>

<pre><code>... 
doSomething() {
    console.log('doing something');
}
</code></pre>

<p>popover.ts</p>

<pre><code>...
bind() {
$(this.element).popover({
    title: this.title,
    placement: this.placement,
    content: this.content,
    trigger: 'click',
    html: true
    });
}
</code></pre>