Restricted scope / Effective method for passing an array to the directive user

Question

Restricted scope / Effective method for passing an array to the directive user

Picture this scenario where a custom directive is referenced in myHtml.tpl.html:

<my-directive></my-directive>

This directive starts with an isolated scope.

Naturally, there's a controller tied to myHtml.tpl.html.

I aim to pass a computed array from the isolated scope to the controller's scope.

One approach could be:

<my-directive arrayToCompute="arrayToCompute"></my-directive>

The isolated scope (in the directive) would look like this:

scope: {arrayToCompute: "="}

and the controller would begin with an empty array declaration:

$scope.arrayToCompute = [];

However, this solution might not seem very elegant...

Is there a better option?
(Note that I want to retain the scope isolation of the directive).

javascript angularjs angularjs-directive angularjs-scope

Answer 1

Answer №1

To implement a strict decoupling, consider using a notify-callback. For example:

app.controller('AppCtrl', ['$scope', function ($scope) {
  $scope.raw      = [1, 2, 3];
  $scope.computed = null;

  $scope.setComputed = function setComputed(computed) {
    $scope.computed = computed;
  };
}]);

app.directive('myDirective', function () {
  return {
    restrict: 'E',
    scope: {
      input:     '=?',
      onCompute: '&'
    },
    link: function (scope) {
      function compute(input) {
        return input.slice().reverse();
      }

      scope.$watch('input', function (nv) {
        scope.onCompute({
          computed: compute(nv)
        });
      });
    }
  };
});

Include the following in your code:

<body data-ng-controller="AppCtrl">
  <my-directive input="raw" on-compute="setComputed(computed)"></my-directive>

  <pre>{{ raw | json }}</pre>
  <pre>{{ computed | json }}</pre>
</body>

View demo here: http://jsbin.com/satavesuhiqu/1/

Answer 2

To implement a strict decoupling, consider using a notify-callback. For example:

app.controller('AppCtrl', ['$scope', function ($scope) {
  $scope.raw      = [1, 2, 3];
  $scope.computed = null;

  $scope.setComputed = function setComputed(computed) {
    $scope.computed = computed;
  };
}]);

app.directive('myDirective', function () {
  return {
    restrict: 'E',
    scope: {
      input:     '=?',
      onCompute: '&'
    },
    link: function (scope) {
      function compute(input) {
        return input.slice().reverse();
      }

      scope.$watch('input', function (nv) {
        scope.onCompute({
          computed: compute(nv)
        });
      });
    }
  };
});

Include the following in your code:

<body data-ng-controller="AppCtrl">
  <my-directive input="raw" on-compute="setComputed(computed)"></my-directive>

  <pre>{{ raw | json }}</pre>
  <pre>{{ computed | json }}</pre>
</body>

View demo here: http://jsbin.com/satavesuhiqu/1/

Restricted scope / Effective method for passing an array to the directive user

Answer №1

Similar questions

Adjust the burger menu color based on the background color of the section

extract elements from dataset

Avoid storing js files in cache during the development phase

Enhancing website performance with a combination of Google Analytics outbound click tracking and a JavaScript speed bump

Issue with sizing and panning when using a combination of Three.js and CSS3Renderer

Get a file from a node.js web server by clicking a button to initiate the download

JSON format used to convert information from a webpage

Tips for showcasing all values in a nested array

HeaderView in Angular Framework

Exporting JSON models with textures from Blender using THREE.JS

How come I am receiving a null value for isMatch from bcrypt compare even though the two password strings match exactly?

Issue with converting form data to JSON format

The Next.js 404 error page seems to be malfunctioning. Any ideas on what might be causing this issue?

Tips for inserting a jQuery snippet into a universal file

jQuery's callback handling often reverses the statement I just made

How to create a CSS animation that gradually darkens a background image during a

Tips for submitting an AJAX response using a form

Cleaning up unwanted objects in THREE.js webGL

sending data from an AngularJS application to an MVC controller in JSON format containing multiple arrays

Modify the css with JQUERY when there are no rows inside the tbody section