Angular+JQ+Bootstrap

by bryangrimes

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
    <form submit-on="myEvent" ng-submit="onSubmitted()">

    Header inputs:
        <input type="name" ng-model="sample" required/>
        <input type="name" ng-model="sampleX" required/>
        
        <input type="submit" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>
    </form>

    <hr/>
    
    Some other form here. Think line items
    
    <hr />
    <a class="btn" ng-click="triggerSubmit()">Wanted this submit to trigger the validation to the form on which this button doesn't belong, e.g. trigger to header</a>

    

</div>

JavaScript

var app = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.triggerSubmit = function() {
        $scope.$broadcast('myEvent');
        console.log('broad');
    };
    
    $scope.onSubmitted = function() {
        alert('submitted!');
    };
}


app.directive('submitOn', function() {
    return {
        link: function(scope, elm, attrs) {
            scope.$on(attrs.submitOn, function() {
                //We can't trigger submit immediately, or we get $digest already in progress error :-[ (because ng-submit does an $apply of its own)
                setTimeout(function() {
                    elm.trigger('submit');
                });
            });
        }
    };
});