从控制器外部访问指令作用域

Accessing directive scope from outside controller

本文关键字：指令 作用域 访问 外部 控制器      更新时间：2023-09-26

我正在控制器中创建一个自定义指令，并按如下方式在ng-reeat中调用它：

HTML:

<div ng-controller="TestCtrl">
  <div ng-repeat="page in pages">
   <custom 
    load-data="loadData = fn">
   </custom>
  </div>
</div>

JS：
在测试指令中，我调用loadData如下：

scope: {
   loadData: "&"
}
controller: ['$scope', '$element', '$timeout', '$filter', function ($scope, $element, $timeout, $filter) {
$scope.loadData({ fn: function(data) {  
 //Data calc.
}});
}

我从TestCtrl调用loadData，如下所示：

App.controller('TestCtrl', function($scope, $http, $timeout, $rootScope) {
 $scope.loadData(data);
}

我需要调用loadData函数，但它抛出错误为undefined is not a function有没有任何方法可以从外部访问child指令的范围。我经历了一些SO问题，其中提到使用ng重复更改范围，但我无法找到解决方案。我也尝试过使用$broadcast和$on，但这对没有帮助

有人能帮我吗？

提前感谢

我不一定能理解你的请求。。您的代码没有任何意义，data变量在哪里定义？（控制器：第2行），fn函数在哪里定义？（html:第4行）。

你得到了错误undefined is not a function，这并不让我感到惊讶，因为你从未定义过$scope.loadData方法。。。

我试图理解你的问题，并生成了以下代码片段：

angular.module('demo', []);
angular.module('demo')
  .directive('custom', function () {
    return {
      restrict: 'E',
      template: '<div>{{ data || "loading..." }}</div>',
      scope: {
        loadData: '=',
        page: '='
      },
      link: function (scope) {
        scope.loadData(scope.page, function (data) {
          scope.data = data;
        });
      }
    };
  });
angular.module('demo')
  .controller('MainCtrl', function ($scope, $timeout) {
  
    $scope.loadData = function (page, done) {
      $timeout(function () {
        done('data loaded data from ' + page.name);
      }, 1000);
    };
  
    $scope.pages = [
      { name: 'page 1' },
      { name: 'page 2' },
      { name: 'page 3' }
    ];
  
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="demo" ng-controller="MainCtrl">
  
  <div ng-repeat="page in pages">
    <custom load-data="loadData" page="page"></custom>
  </div>
  
</div>

也许这对你有帮助。

相关文章：