我在理解$作用域传播的工作原理时遇到了一个问题。 我有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