Example for stackoverflow. Event and request

useFormError is a angularjs directive, which is designed to create custom checks

by Stepan Kasyanenko

HTML

<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
<script src="https://rawgit.com/mgcrea/angular-strap/master/dist/angular-strap.min.js"></script>
<script src="https://rawgit.com/mgcrea/angular-strap/master/dist/modules/modal.min.js"></script>
<script src="https://rawgit.com/mgcrea/angular-strap/master/dist/modules/modal.tpl.min.js"></script>
<script src="https://rawgit.com/mgcrea/angular-strap/master/dist/angular-strap.tpl.min.js"></script>
<body ng-app="ExampleApp">
  <div ng-controller="ExampleOneController">
    <h3>
      ExampleOneController
    </h3>
    <form name="ExampleForm" id="ExampleForm">
    <pre>counter : {{counter}}</pre>
    <pre>successCounter: {{successCounter}}</pre>
    <pre class="errors">errorCounter: {{errorCounter}}</pre>
    </form>

    <div ng-controller="ExampleTwoController">
      <h3>
      ExampleTwoController
    </h3>
      <form name="ExampleForm" id="ExampleForm">
        <input ng-model="raiseValue">
        <br>
        <button ng-click="raise(raiseValue)" simple>
          Send request to "{{raiseValue}}"
        </button>
      </form>
    </div>
  </div>
</body>

CSS

.errors {
  color: maroon
}

JavaScript

angular.module('ExampleApp', ['use'])
  .controller('ExampleOneController', function($scope, ServiceExample) {
    $scope.counter = 0;
    $scope.successCounter = 0;
    $scope.errorCounter = 0;
    $scope.$on('raise.event', function(event, value) {
      console.log('counter', $scope.counter);
      $scope.counter++;
      ServiceExample.get(value).then(function() {
        console.log('success response:', $scope.successCounter);
        $scope.successCounter++;
      }).catch(function() {
        console.log('error response:', $scope.errorCounter);
        $scope.errorCounter++;
      });
    });
  })
  .controller('ExampleTwoController', function($scope) {
  $scope.raiseValue = "www.google.com"
    $scope.raise = function(val) {
      $scope.$emit('raise.event', val);
    };
  })
  .service('ServiceExample', function($http) {
    return {
      get: function(url) {
        return $http({
          method: "GET",
          url: url
        });
      }
    }
  });