AngularJS share data between nested components properly

Question

I want to embed a nested component in a page.

(A page is actually a controller that can be reached via the $routeProvider service)

And I want to bring data from the main component to its child component and vice versa - in order to make all of the components in the page and the page itself talking with each other in a full data binding.

I success to send data from parent to child with specific bindings attributes, however, I am not getting a way to bring data from child to parent.

// lobby.js - the main page.
// we can reach this page via browser by the $routeProvider service

app.config(($routeProvider) => {
  $routeProvider
  .when("/", {
    templateUrl : "screens/lobby/lobby.html"
  })
});

app.controller("lobby", ($scope, datepickerService) => {

  $scope.title = "Welcome to Lobby screen!";

  $scope.order = {};

  $scope.send = function() {
    console.log($scope.order);
  };

});

Lobby.html

<!-- This is lobby.html file -->
<!-- Which is the html template of the main page (lobby.js) -->

<link rel="stylesheet" href="screens/lobby/lobby.css">

<div class="lobby" ng-controller="lobby">

  <date-picker type="default" model="startDate"></date-picker>
  <date-picker type="default" model="endDate"></date-picker>

  <button type="button" name="button" ng-click="send()">Send</button>

</div>

Now as you can see, in the lobby.html file I have a nested component which is <date-picker></date-picker>. From parent I pass to this child component two attributes: type and model.

Now lets see this component functionality:

// datepicker.js component (actually defined as a directive)
// Initializing a datepicker plugin from jQuery UI Lib.

app.directive("datePicker", (datepickerService) => {
  return {
    templateUrl: "/shared/datepicker/datepicker.html",
    scope: {
      model: "@",
      type: "@",
    },
    link: function(scope, elements, attrs) {

      $(function() {
        setTimeout(function () {
          $("." + scope.model).datepicker({
            onSelect: function(value) {
              value = datepickerService.correct(value);
              $("." + scope.model).val(value);
              console.log(value);
            }
          });
        }, 200);
      });

    }
  }
});

datepicker.html

<!-- datepicker.html the datepicker html template -->
<!-- Successfuly getting the datepicker to be loaded and work -->

<box ng-show="type=='default'">
  <input type="text" class="{{model}}" readonly>
</box>

Now the problem: notice the:

// lobby.js
$scope.send = function() {
  console.log($scope.order);
};

in the lobby.js file.

I need this to send the actual startDate and endDate to a remote server. However I cannot access this data! $scope.order remains blank.

I have tried using components instead of directives I have tried ng-include I have tried more lot of things that I wont bother you with, since I have spent on it more than 3 days.

How can I work with nested components so all of the data will be shared through each of them, including the main page in AngularJS in order to create a scaleable modern app?

Thanks.

Mixing jQuery with AngularJS like this is asking for problems. Consider using an AngularJS plugin like uib-datepicker-popup, a Bootstrap component written in pure AngularJS by the AngularUI Team. — georgeawg

Ashu Mhatugade Ashu Mhatugade · Accepted Answer · 2018-07-03T11:02:50

For sending data from parent to child angular provides the $broadcast() method and for sending data from child to parent it provides the $emit() method.

More info: http://www.binaryintellect.net/articles/5d8be0b6-e294-457e-82b0-ba7cc10cae0e.aspx

AngularJS share data between nested components properly

2 Answers