Interacting with directive scope beyond controller boundaries

Question

Interacting with directive scope beyond controller boundaries

Developing a custom directive within a controller and implementing it in an ng-repeat loop:

HTML:

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

JS:
The loadData function within the Test directive is invoked in the following manner:

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

The invocation of loadData from TestCtrl looks like this:

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

Although I'm trying to execute the loadData function, it results in an error stating undefined is not a function. Is there a way to access the child directive's scope externally? I've researched using ng-repeat modifying the scope, but haven't found a solution yet. Attempted methods like $broadcast and $on didn't provide any help.

If anyone could offer assistance, it would be greatly appreciated.

Thank you in advance.

javascript angularjs angularjs-directive angularjs-scope

Answer 1

Answer №1

I am having trouble understanding your query. Your code seems unclear to me as the data variable is not defined (controller: line 2) and the fn function is also missing (html: line 4).

You are receiving the error undefined is not a function probably because you have not defined the $scope.loadData method.

In an attempt to assist, I have created this code snippet:

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>

Hopefully, this helps clarify things for you.

Answer 2

I am having trouble understanding your query. Your code seems unclear to me as the data variable is not defined (controller: line 2) and the fn function is also missing (html: line 4).

You are receiving the error undefined is not a function probably because you have not defined the $scope.loadData method.

In an attempt to assist, I have created this code snippet:

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>

Hopefully, this helps clarify things for you.

Interacting with directive scope beyond controller boundaries

Answer №1

Similar questions

Prevent the use of exponential notation with double numbers in GWT

What is the best way for an object to recognize if its value matches a key in another object, and then retrieve that value

"Implementing an ellipsis feature in Highcharts to handle lengthy data gracefully

Unable to process form submission with AngularJS + Stormpath

Function for triggering character or camera movement upon the pressing of a button

Maximizing Angular JS capabilities within ASP.NET Master Pages

Retrieve class attributes within callback function

A guide on how to modify a CSS property to set the display to none upon clicking a radio button

Updating CSS classes based on conditions in Angular 2

The element does not recognize the property 'width' since it is not defined in the type of 'GlobalEventHandlers'

My Jquery "animate" is only triggered once instead of on each function call. What could be causing this issue?

Steps for showcasing smaller grids underneath a main grid

What is the best way to insert an object into an array based on a specific condition?

What is the best way to use an angular expression in markup to filter down to a specific item within an array?

When the click event is triggered on the modal, the page suddenly jumps to the top while applying the style of hiding the element

Having issues with the onSubmit event not being triggered for a react + material-ui form

Is it possible for a synchronous (blocking) ajax request to delay the rendering of a website's UI?

Facebook's Thumbs Down to My Code

What possible reasons could be causing the ng-show directive to malfunction?

Removing and Cloning Elements with jQuery