0
У меня проблема с пониманием того, как работает распространение $ scope. У меня 2 вложенные контроллеры:AngularJS scope распространение функции
<div ng-controller="ClientCtrl">
<div class="table-responsive" ng-init="getSocietes()">
<div style="width: 98%; height: 500px;" ag-grid="gridSocietes" class="ag-blue ag-basic">
</div>
</div>
<div ng-controller="PopupCtrl">
<script type="text/ng-template" id="pmoPopupConfirmDelete.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
</div>
Первый контроллер имеет AG-сетку с некоторыми данными в нем. Мне нужно показать всплывающее окно, когда пользователь нажимает кнопку удаления, чтобы попросить его подтвердить удаление строки в таблице.
Я пытаюсь использовать Угловой UI Modal контроллер, как показано на их домашней странице.
Таким образом, у меня есть эти 2 контроллера:
var myApp = angular.module('myApp');
myApp.controller('SocietesController', ['$scope', '$http', '$location', '$routeParams', function($scope, $http, $location, $routeParams){
$scope.gridSocietes = {
columnDefs: [
{headerName: "", field: "", width: 45, suppressSorting: true, suppressResize: true, suppressMenu: true, cellRenderer: actionCellRenderer, suppressSizeToFit: true},
{headerName: "Société", field: "Societe", cellRenderer: societeCellRenderer, sort: 'asc', filter: 'text'},
{headerName: "Adresse", field: "Adresse_1", cellRenderer: adresseCellRenderer, filter: 'text'},
{headerName: "Code postal", field: "CP", width: 100, suppressSizeToFit: true, filter: 'text'},
{headerName: "Ville", field: "Ville", filter: 'text'},
{headerName: "Tel", field: "Tel", width: 120, suppressSizeToFit: true, filter: 'text'},
{headerName: "Fax", field: "Fax", width: 120, suppressSizeToFit: true, filter: 'text'},
{headerName: "E-mail", field: "Email", filter: 'text'},
{headerName: "Site Web", field: "Site_Web", filter: 'text'},
{headerName: "Utilisateurs", width: 100, cellRenderer: usersCellRenderer, suppressSorting: true, suppressResize: true, suppressMenu: true, suppressSizeToFit: true}
],
enableColResize: true,
enableSorting: true,
enableFilter: true,
rowSelection: 'single',
rowData: null,
angularCompileRows: true
};
$scope.getSocietes = function(){
$http.get('/api/societes').success(function(response){
$scope.societes = response;
$scope.gridSocietes.api.setRowData(response);
$scope.gridSocietes.api.sizeColumnsToFit();
});
}
$scope.supprimerSociete = function(id, index){
console.log($scope)
alert('go');
openPopup('sm', 'pmoPopupConfirmDelete.html')
return;
$http.delete('/api/societes/'+id).success(function(response){
$scope.societes.splice(index, 1);
$scope.gridSocietes.api.setRowData($scope.societes);
});
}
console.log($scope)
}]);
и контроллер Popup:
var myApp = angular.module('myApp');
myApp.controller('PopupCtrl', ['$scope', function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.openPopup = function (size, template) {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'pmoPopupConfirmDelete.html',
controller: 'ModalPopupCtrl',
size: size,
resolve: {
items: function() {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function() {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
}]);
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
myApp.controller('ModalPopupCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function() {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
Я пытаюсь понять, почему функция $ scope.supprimerSociete в первом контроллере не см. функцию OpenPopup во втором контроллере.
Я пробовал немало вещей, но функция OpenPopup никогда не появляется в области 1-го контроллера (даже когда я пытаюсь вызвать его с помощью $ scope.OpenPopup), тогда как все, начиная с 1-го контроллера, появляется в Popup контроллер, когда я регистрирую $ scope в нем ...
Что мне там не хватает?
Thx заранее!
ChildScope наследует функции родителя, но родитель не знает функции своих детей. – Pjetr