В AngularJs Как объединить функцию как универсальную для использования для контроллера изменений?

0

Веб-приложение использует те же функции редактирования, удаления и обновления в различных частях контроллера веб-приложений. Есть ли решение использовать эти функции как глобальные для всех контроллеров?

$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>&nbsp;</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>&nbsp;</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
angularjs-scope

2 ответа

1

В вашем случае я бы реорганизовал эти специальные методы на службу...

(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...
    }
})();

На самом деле это весь смысл услуг. Счастливый рефакторинг!

0

вы можете использовать $ 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);
                }
            }
        }
    };
}]);
  • 1
    Добавление материала в $ rootScope считается плохой практикой.
  • 0
    Чтобы $scope комментарий Джона Сноу: очень редко нужно даже использовать $scope , не говоря уже о $rootScope . Сканирование цепочек $scope означает, что у вас, скорее всего, есть фундаментальный недостаток разработки кода; Ваш код должен быть разделен так, чтобы контроллер был больше всего контекста, в котором течет информация и который используется.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню