我在理解$作用域傳播的工作原理時遇到了一個問題。 我有2個嵌套控制器:AngularJS作用域的傳播
<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-網格在它的一些數據。當用戶點擊刪除按鈕時,我需要顯示一個彈出窗口,以便讓他確認刪除表格中的一行。
我正在嘗試使用Angular 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)
}]);
且彈出式控制器:
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函數從未出現在第一個控制器的範圍中(即使我嘗試使用$ scope.OpenPopup調用它),而來自第一個控制器的所有內容都顯示在Popup控制器當我登錄$範圍內...
我在那裏失蹤?
Thx提前!
childScope繼承父級的功能,但父級不知道他的子級的功能。 – Pjetr