search

PatrickJS / angular-event-emitter

Event emitters for AngularJS
8 stars 2 forks source link

readme

angular-event-emitter

Event emitters for AngularJS

How do I add this to my project?

You can download angular-event-emitter by:

<html>
<body ng-app="YOUR_APP">
  <div ng-controller="MainController">
    <span ng-repeat="toggle in toggles">
        <input type="button" ng-channel="click:{{ 'channel'+$index }}" ng-emit="$index" value="Toggle {{ toggle }}" />
    </span>
    <button ng-click="add(toggles)">Add more</button>

    <span ng-repeat="toggle in toggles"
          ng-on="click:{{ 'channel'+$index }}"
          ng-execute="callback"
          toggle-section>
        <p>This is section #{{ toggle }}</p>
    </span>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.js"></script>
  <script src="https://github.com/PatrickJS/angular-event-emitter/raw/master/bower_components/angular-event-emitter/angular-event-emitter.js"></script>
  <script type="text/javascript">
    angular.module('YOUR_APP', [
      'ngEventEmitter' // you may also use 'angular-event-emitter'
    ])
    .controller('MainController', function($scope, $once, $on, $emit) {
        $once('event', function(event, args) {
          console.log('$once ', args);
        });
        $on('event', function(event, args) {
          console.log('$on', args);
        });

        $scope.add = function(collection) {
          var lastIndex = collection.length-1;
          var count = collection[lastIndex];
          collection.push(count+1);
        };

        $scope.toggle = true;
        $scope.toggles = [1,2,3];
    //    $scope.triggerArgs = function() {};
        $scope.callback = function(value) {
          $emit('event', 'trigger event');
          console.log('callback ', arguments);
        };
    })
    .directive('toggleSection', function($animate) {
      return function(scope, element, attrs) {
        var toggle = true;
        scope.$onRootScope('event:'+(attrs.ngOn || attrs.toggleSection), function(ev,num) {
          toggle = !toggle;
          var toggleClass = (toggle) ? 'removeClass' : 'addClass';
          $animate[toggleClass](element, 'ng-hide');
          $animate[toggleClass](element, 'ng-show');
        });
      }
    });

  </script>
</body>
</html>