CODEWITHSUNDEEP
angularjs
Rob
Rob

Reputation: 27357

Get element scope from attribute directive

I'm trying to extend functionality of any directive by simply attaching an attribute directive, but I'm having trouble getting the scope of the element on which the attribute is defined.

For example, I have this template:

<div class="flex-item-grow flex-item flex-column report-area">
    <sv-report sv-reloadable id="reportId"></sv-report>
</div>

Here, sv-reloadable has some implicit understanding of sv-report, but sv-report has no idea about sv-reloadable.

I've defined sv-reloadable as:

angular
    .module( 'sv-reloadable', [
        'sv.services',
    ])
    .directive('svReloadable', function(reportServices, $timeout) {
        return {
            restrict: 'A',
            controller: function($scope, $timeout) {
                $scope.$on('parameter-changed', function(evt, payload) {
                    evt.stopPropagation();
                    $scope.viewModel = getNewViewModel(payload);/* hit the server to retrieve new data */
                });
            }
        };
    });

Now, $scope in sv-reloadable is the parent scope of sv-report. I'm wanting sv-reloadable to be able to attach a listener to sv-report's scope, and swap out properties of that scope. I understand that it's possible to grab the sibling scopes, but that causes problems when trying to figure out exactly which element it's attached to.

I attempted the following:

link: function(scope, element, attrs) {
    ele = element;
    var actualScopyThingy = element.scope();
},

Which I had assumed would give me the scope of the element the attribute was defined on, but alas, it still returns the parent scope of the element.

If it's important, sv-report is defined as the following, but I'd like to be able to keep it the same (since sv-reloadable is going to be attached to many different elements, all of which must have viewModel defined on their scope)

return {
    restrict: 'E',
    replace: true,
    templateUrl: 'sv-report/sv-report.tpl.html',
    scope: {
      id: '=',
      reportParameters: '='
    },
    controller: function ($scope, svAnalytics) {
      /* unrelated code here */
    },
    link: function(scope, element, attrs) {
      initialLoadReport(scope);
    }
};

Upvotes: 1

Views: 970

Answers (1)

Rob
Rob

Reputation: 27357

After a bit of digging around, isolateScope() is what I was after (rather than scope()). sv-reloadable's directive becomes:

return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var elementScope = element.isolateScope();
            elementScope.$on('parameter-changed', function(evt, payload) {
                ...
            });
        }
    };

Upvotes: 1

Related Questions