Question

我试图通过简单地附加属性指令来扩展任何指令的功能，但是我无法获得定义属性的元素的范围。

例如，我有这个模板：

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

此处，sv-reloadable对sv-report有一些隐含的理解，但sv-report 不知道关于sv-reloadable。

我已将sv-reloadable定义为：

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 */
                });
            }
        };
    });

现在，$scope中的sv-reloadable是sv-report的父范围。我希望sv-reloadable能够将监听器附加到sv-report的范围，并交换该范围的属性。我知道可以抓住兄弟范围，但是当试图弄清楚它附加到哪个元素时会引起问题。

我尝试了以下内容：

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

我假定会给我定义属性的元素的范围，但是，它仍然会返回元素的父范围。

如果它很重要，sv-report定义如下，但我希望能够保持相同（因为sv-reloadable将附加到许多不同的元素，所有哪个必须在其范围内定义viewModel

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);
    }
};

Answer 1

经过一番挖掘，isolateScope()就是我所追求的（而不是scope()）。 sv-reloadable的指令变为：

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

从属性指令获取元素范围

1 个答案: