Веб-приложение использует те же функции редактирования, удаления и обновления в различных частях контроллера веб-приложений. Есть ли решение использовать эти функции как глобальные для всех контроллеров?
$scope.newEmi = function(){
$scope.editEmi = function(id)
$scope.addEmi = function(){
$scope.deleteEmi = function(id)
функционирует как глобальная функция() в AngularJs
Демо: http://codepen.io/anon/pen/OVQQJB
Вот один из примеров функции контроллера веб-приложения
(function() {
var app = angular.module('myApp', []);
app.controller('loanController', function($scope) {
$scope.loanedit = false;
$scope.emiedit = false;
$scope.banks = [{
"id": 1,
"name": "PNB",
"branchcode": "13-35-96",
"ifsc": 989525621542,
"micr": 1324586468,
"swift": 99944422258,
"contact": "0483-569821",
"branch": 'Manjeri',
"address": {
"line1": "bank addres line 1",
"line2": "Banks address line 2"
}
}, {
"id": 2,
"name": "ICICI Banks",
"ifsc": 989525621542,
"branchcode": "13-35-96",
"micr": 1324586468,
"swift": 99944422258,
"contact": "0483-569821",
"branch": 'Calicut',
"address": {
"line1": "bank addres line 1",
"line2": "Banks address line 2"
}
}, {
"id": 3,
"name": "SBT",
"ifsc": 989525621542,
"branchcode": "13-35-96",
"micr": 1324586468,
"swift": 99944422258,
"contact": "0483-569821",
"branch": 'Pandikkad',
"address": {
"line1": "bank addres line 1",
"line2": "Banks address line 2"
}
}];
$scope.loans = [{
"id": 1,
"bank_id": 1,
"name": "Bike Loan",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut dolores, aut itaque accusantium laborum sapiente.",
"amount": 10000,
"paid": 5000,
"balance": 5000,
"date": "12-May-2015",
"closedate": "20-March-2018",
"interest": "12%",
}, {
"id": 2,
"bank_id": 3,
"name": "Hosing loan",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut dolores, aut itaque accusantium laborum sapiente.",
"amount": 7000,
"paid": 3000,
"balance": 4000,
"date": "12-May-2015",
"closedate": "20-March-2018",
"interest": "11%",
}, {
"id": 3,
"bank_id": 2,
"name": "Vehicle Loan",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut dolores, aut itaque accusantium laborum sapiente.",
"amount": 50000,
"paid": 1200,
"balance": 38000,
"date": "12-May-2015",
"closedate": "20-March-2018",
"interest": "9.5%",
}];
$scope.newaccount = {};
$scope.newLoan = function() {
$scope.newloan = {};
};
$scope.editLoan = function(id) {
$scope.loanedit = true;
for (var i = 0; i < $scope.loans.length; i++) {
if ($scope.loans[i].id == id) {
$scope.newloan = angular.copy($scope.loans[i]);
}
}
};
// TODO unique ID for new loan
$scope.addLoan = function() {
if ($scope.newloan.id == null) {
$scope.newloan.id = $scope.loans.length + 1;
$scope.loans.push($scope.newloan);
} else {
for (var i = 0; i < $scope.loans.length; i++) {
if ($scope.loans[i].id == $scope.newloan.id) {
$scope.loans[i] = $scope.newloan;
}
}
}
$scope.newloan = {};
$scope.loanedit = false;
};
$scope.deleteLoan = function(id) {
for (var i = 0; i < $scope.loans.length; i++) {
if ($scope.loans[i].id == id) {
var confirmDelete = confirm("Do you really need to delete " + $scope.loans[i].name + "?");
if (confirmDelete) {
$scope.loans.splice(i, 1);
}
}
}
};
$scope.emis = [{
"id": 1,
"loan_id": 1,
"amount": 4500,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla reprehenderit quisquam suscipit nesciunt exe",
"date": "12-March-1999"
}, {
"id": 2,
"loan_id": 1,
"amount": 900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima dolores sapiente provident accusantium natu",
"date": "01-May-2015"
}, {
"id": 3,
"loan_id": 2,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque laudantium iste quae deserunt itaque recusan",
"date": "03-February-2015"
}, {
"id": 3,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus error odio autem, voluptatibus perferendi",
"date": "03-February-2015"
}, {
"id": 4,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, laborum. Ipsum, facilis deleniti nam atque a",
"date": "03-February-2015"
}, {
"id": 5,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum facere sapiente ex totam tenetur, aspernatur, ",
"date": "03-February-2015"
}, {
"id": 6,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates recusandae veniam iure architecto exerc",
"date": "03-February-2015"
}, {
"id": 7,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto harum qui ipsam inventore modi molestia",
"date": "03-February-2015"
}, {
"id": 8,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo numquam, iure, perferendis ipsum ipsa odit asp",
"date": "03-February-2015"
}, {
"id": 9,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quam veniam ea nemo, nobis dignissimos. Molest",
"date": "03-February-2015"
}, {
"id": 10,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem rem enim, architecto voluptate quidem ad dol",
"date": "03-February-2015"
}, {
"id": 11,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima velit ad natus assumenda, at illo, nulla il",
"date": "03-February-2015"
}, {
"id": 12,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, quibusdam minima quos exercitationem fugiat ",
"date": "03-February-2015"
}, {
"id": 13,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure repudiandae adipisci officia vitae odit moles",
"date": "03-February-2015"
}, {
"id": 14,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo nostrum perferendis repellat voluptates sapien",
"date": "03-February-2015"
}, {
"id": 15,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia placeat, labore pariatur odio doloribus est n",
"date": "03-February-2015"
}, {
"id": 16,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident inventore itaque beatae dicta eligendi n",
"date": "03-February-2015"
}, {
"id": 17,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque magni quaerat provident rerum sapiente,",
"date": "03-February-2015"
}, {
"id": 18,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, corrupti, laborum? Ipsa maiores labori",
"date": "03-February-2015"
}, {
"id": 19,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo tempore, cum ad, dicta omnis dignissimos amet",
"date": "03-February-2015"
}, {
"id": 20,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam accusamus esse, facere veniam. Non tenetur",
"date": "03-February-2015"
}, {
"id": 21,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laboriosam, eligendi, earum, minus et inc",
"date": "03-February-2015"
}, {
"id": 22,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptate totam dolor commodi ipsa ducimus",
"date": "03-February-2015"
}, {
"id": 23,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim omnis dolorem voluptas minima neque impedit q",
"date": "03-February-2015"
}, {
"id": 24,
"loan_id": 3,
"amount": 1900,
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quisquam nihil repellendus officia error cu",
"date": "03-February-2015"
}];
$scope.newEmi = function() {
$scope.newemi = {};
};
$scope.editEmi = function(id) {
$scope.emiedit = true;
for (var i = 0; i < $scope.emis.length; i++) {
if ($scope.emis[i].id == id) {
$scope.newemi = angular.copy($scope.emis[i]);
}
}
};
// TODO unique ID for new loan
$scope.addEmi = function() {
if ($scope.newemi.id == null) {
$scope.newemi.id = $scope.emis.length + 1;
$scope.emis.push($scope.newemi);
} else {
for (var i = 0; i < $scope.emis.length; i++) {
if ($scope.emis[i].id == $scope.newemi.id) {
$scope.emis[i] = $scope.newemi;
}
}
}
$scope.newemi = {};
$scope.emiedit = false;
};
$scope.deleteEmi = function(id) {
for (var i = 0; i < $scope.emis.length; i++) {
if ($scope.emis[i].id == id) {
var confirmDelete = confirm("Do you really need to delete ?");
if (confirmDelete) {
$scope.emis.splice(i, 1);
}
}
}
};
});
})();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div class="container" ng-controller="loanController">
<div class="row">
<div class="col-md-12">
<div class="box">
<button type="button" class="btn btn-primary pull-right" ng-hide="loanedit" ng-click="loanedit = true; newLoan();">
<i class="fa fa-plus"></i> Add loan
</button>
<!-- <pre>{{loans | json}}</pre> -->
<form class="form-horizontal" ng-submit="addLoan()" ng-show="loanedit">
<h3>New Loan</h3>
<br>
<div class="form-group">
<label class="col-sm-2 control-label">Loan name</label>
<div class="col-sm-5">
<input type="text" class="form-control" ng-model="newloan.name" placeholder="Loan name" required>
</div>
<label class="col-sm-1 control-label">Bank</label>
<div class="col-sm-2">
<select ng-model="newloan.bank_id" ng-options="bank.id as bank.name for bank in banks" class="form-control" required></select>
</div>
<label class="col-sm-1 control-label">Interest</label>
<div class="col-sm-1">
<input type="text" ng-model="newloan.interest" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Amount</label>
<div class="col-sm-2">
<input type="text" class="form-control" ng-model="newloan.amount" placeholder="Amount" required>
</div>
<label class="col-sm-1 control-label">Paid</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="newloan.paid" placeholder="Paid">
</div>
<label class="col-sm-1 control-label">Due</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="newloan.balance" placeholder="Due">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="newloan.description" placeholder="Description">
</div>
<label class="col-sm-1 control-label">Close date</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="newloan.closedate" placeholder="Close date">
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-right">
<button type="button" class="btn btn-default" ng-click="loanedit = false;">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
<hr>
</form>
<h3>Loans and details</h3>
<table class="table table-hover table-responsive">
<thead>
<tr>
<th> </th>
<th>Name</th>
<th>Amount</th>
<th>Interest</th>
<th>Paid</th>
<th>Due</th>
<th>Date</th>
<th>Close date</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="loan in loans">
<td>{{$index+1}}</td>
<td><a>{{loan.name}}</a>
</td>
<td><i class="fa fa-inr"></i> {{loan.amount}}</td>
<td>{{loan.interest}}</td>
<td><i class="fa fa-inr"></i> {{loan.paid}}</td>
<td><i class="fa fa-inr"></i> {{loan.balance}}</td>
<td>{{loan.date}}</td>
<td>{{loan.closedate}}</td>
<td>
<div class="btn-group btn-group-xs" role="group" ng-init="editmode=false">
<button type="button" class="btn btn-default" ng-hide="editmode" ng-click="editLoan(loan.id);">
<i class="glyphicon glyphicon-pencil"></i>
</button>
<button type="button" class="btn btn-default" ng-hide="editmode" ng-click="deleteLoan(loan.id); editmode = !editmode">
<i class="glyphicon glyphicon-trash"></i>
</button>
<button type="button" class="btn btn-default" ng-show="editmode" ng-click="editmode = !editmode">
<i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-default" ng-show="editmode" ng-click="editmode = !editmode">
<i class="fa fa-times"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-12">
<div class="box">
<button type="button" class="btn btn-primary pull-right" ng-hide="emiedit" ng-click="emiedit = true; newLoan();">
<i class="fa fa-plus"></i> Add EMI
</button>
<form class="form-horizontal" ng-submit="addEmi()" ng-show="emiedit">
<h3>New EMI</h3>
<div class="form-group">
<label class="col-sm-2 control-label">Loan name</label>
<div class="col-sm-4">
<input type="text" class="form-control" ng-model="newemi.amount" placeholder="Amount" required>
</div>
<label class="col-sm-1 control-label">Loan</label>
<div class="col-sm-2">
<select ng-model="newemi.bank_id" ng-options="loan.id as loan.name for loan in loans" class="form-control" required></select>
</div>
<label class="col-sm-1 control-label">Date</label>
<div class="col-sm-2">
<input type="text" ng-model="newemi.date" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea class="form-control" ng-model="newemi.description" placeholder="Description"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-right">
<button type="button" class="btn btn-default" ng-click="emiedit = false;">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
<hr>
</form>
<h3>Loan EMI</h3>
<table class="table table-hover table-responsive">
<thead>
<tr>
<th> </th>
<th>Description</th>
<th>Amount</th>
<th>Date</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emi in emis">
<td>{{$index+1}}</td>
<td>{{emi.description}}</td>
<td><i class="fa fa-inr"></i> {{emi.amount}}</td>
<td>{{emi.date}}</td>
<td>
<div class="btn-group btn-group-xs" role="group" ng-init="editmode=false">
<button type="button" class="btn btn-default" ng-hide="editmode" ng-click="editEmi(emi.id);">
<i class="glyphicon glyphicon-pencil"></i>
</button>
<button type="button" class="btn btn-default" ng-hide="editmode" ng-click="deleteEmi(emi.id); editmode = !editmode">
<i class="glyphicon glyphicon-trash"></i>
</button>
<button type="button" class="btn btn-default" ng-show="editmode" ng-click="editmode = !editmode">
<i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-default" ng-show="editmode" ng-click="editmode = !editmode">
<i class="fa fa-times"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
В вашем случае я бы реорганизовал эти специальные методы на службу...
(function () {
'use strict';
angular.module('app').factory('crudService', [crudService]);
function crudService() {
var service = {
addThing: function () {
// Add a thing!
},
// Same for those other commonly-used functions
};
return service;
}
})();
... Который может быть включен в ваши контроллеры как зависимость так:
(function () {
'use strict';
angular.module('app').controller('someController', ['crudService', someController]);
function someController(crudService) {
var vm = this;
// Other things...
vm.add = add;
// Other method wrappers...
function add() {
// Pretty much, this function is just a wrapper.
crudService.addThing();
}
// Other wrappers...
}
})();
На самом деле это весь смысл услуг. Счастливый рефакторинг!
вы можете использовать $ rootScope для этого. Данные $ rootScope всегда постоянны !!!
app.run(['$rootScope', function ($rootScope) {
$rootScope.deleteEmi = function (id) {
for (var i = 0; i < $rootScope.emis.length; i++) {
if ($rootScope.emis[i].id == id) {
var confirmDelete = confirm("Do you really need to delete ?");
if (confirmDelete) {
$rootScope.emis.splice(i, 1);
}
}
}
};
}]);
$scope
комментарий Джона Сноу: очень редко нужно даже использовать$scope
, не говоря уже о$rootScope
. Сканирование цепочек$scope
означает, что у вас, скорее всего, есть фундаментальный недостаток разработки кода; Ваш код должен быть разделен так, чтобы контроллер был больше всего контекста, в котором течет информация и который используется.