Question

我想在页面中嵌入一个嵌套组件。

（页面实际上是可以通过$routeProvider服务访问的控制器）

我想将数据从主要组件引入其子组件，反之亦然-为了使页面中的所有组件与页面本身在完整的数据绑定中相互交流。

我成功将具有特定绑定属性的数据从父级发送到子级，但是，我没有办法将数据从子级带到父级。

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

现在您可以看到，在lobby.html文件中，我有一个嵌套组件<date-picker></date-picker>。从父级我传递到此子级组件的两个属性：type和model。

现在让我们看看该组件的功能：

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

现在是问题：注意：

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

在大厅.js文件中。

我需要这样做才能将实际的startDate和endDate发送到远程服务器。但是我无法访问该数据！ $scope.order保持空白。

我尝试使用组件而不是ng-include的指令，因为我花了超过3天的时间尝试了很多我不会打扰的事情。

我如何使用嵌套组件，以便通过它们中的每一个共享所有数据，包括AngularJS的主页，以便创建可扩展的现代应用程序？

谢谢。

Answer 1

要从父级向子级发送数据，可以使用$broadcast()方法，而要从子级向父级发送数据，可以使用$emit()方法。

更多信息： http://www.binaryintellect.net/articles/5d8be0b6-e294-457e-82b0-ba7cc10cae0e.aspx

Answer 2

我认为您必须在订单对象中引用startDate和endDate。现在看来，您可以将它们直接保存在$ scope中。尝试进行以下验证：

console.log($scope.order, $scope.startDate, $scope.endDate);

在模型属性中的对象前面添加“ 订单。”。

<!-- 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="order.startDate"></date-picker>
   <date-picker type="default" model="order.endDate"></date-picker>

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

</div>

此外，您可能还需要更改组件的属性定义以使用双向绑定。使用“ = ”代替“ @ ”。 @仅表示传递给您的组件时值的副本，而不会保存回原始对象。

...
scope: {
  model: "=",
  type: "@",
},
...

更新：

请在这里https://embed.plnkr.co/2TVbcplXIJ01BMJFQbgv/找到我的工作柱塞

AngularJS在嵌套组件之间正确共享数据

2 个答案: