Question

我在控制器中创建一个自定义指令，并在ng-repeat中调用它，如下所示：

HTML：

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

JS：
在Test指令中，我按如下方式调用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 有什么办法可以从外面访问子指令的范围。我经历了几个SO问题，其中提到使用ng-repeat更改范围，但我无法找到解决方案。我也试过使用$ broadcast和$ on，但这没有帮助

任何人都可以帮助我。

先谢谢

Answer 1

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

您收到错误undefined is not a function这并不奇怪，因为您从未定义过$scope.loadData方法......

我尝试了解您的问题并制作了此代码段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

也许这可以帮到你。

从外部控制器访问指令范围

1 个答案: