mixing isolated scope and controllerAs syntax

Question

I have a directive that is need of a variable that resides on it's parent controller

<hack-chart-controls counttime="vm.countInMinutes"></hack-chart-controls>

directive:

function hackChartControls($log, $parse) {
    var directive = {
        restriction: 'AE',
        scope: {
            counttime: '='
        },
        templateUrl: '/app/components/hackChartControls.html',
        link: link
    };

    return directive;

Based on this answer I was able to watch when that variable changes in the directive.

However, in the directive markup because I'm using the ControllerAs syntax I am using vm as my scope variable. For Example:

<div class="close"><i class="fa fa-close" ng-click="vm.close()"></i></div>

prior to making the scope: { counttime: '=' } change these ng-click functions worked just fine because it inherited scope from the parent without isolating the scope.

How can I get the click function to work again?

where is this `ng-click`? is this part of the "hackChartControls.html" template? Then, there is no `vm` defined in the isolate scope of the directive. Instead, just do `ng-click="close()"` — New Dev, Sep 05 '15 at 03:25

score 1 · Accepted Answer · answered Sep 05 '15 at 03:25

I would reference the action inside the isolate scope, or not use isolate scope at all. It depends why you want to use isolate scope in the first place. The purpose of isolate scope is to encapsulate the directive and make it independent of the outside scope.

function hackChartControls($log, $parse) {
    var directive = {
        restriction: 'AE',
        scope: {
            counttime: '=',
            action: '&',
        },
        templateUrl: '/app/components/hackChartControls.html',
        link: link
    };

    return directive;
}

And your template:

<div class="close"><i class="fa fa-close" ng-click="action()"></i></div>

Use it like this:

<hack-chart-controls counttime="vm.countInMinutes" action="vm.close()"></hack-chart-controls>

mixing isolated scope and controllerAs syntax

1 Answers1