Я хочу встроить вложенный компонент в страницу.
(страница на самом деле является контроллером, к которому можно обратиться через службу $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>
Теперь, как вы можете видеть, в файлеobby.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);
};
в файлеobby.js.
Мне нужно это для отправки фактических startDate и endDate на удаленный сервер. Однако я не могу получить доступ к этим данным! $scope.order остается пустым.
Я пытался использовать компоненты вместо директив, которые я пробовал ng-include Я перепробовал больше вещей, которыми я не буду вас беспокоить, так как я потратил на это более 3 дней.
Как я могу работать с вложенными компонентами, чтобы все данные передавались через каждый из них, включая главную страницу AngularJS, для создания масштабируемого современного приложения?
Спасибо.