Angular JS - Exposing Controller Function outside the module via onClick function call

Exposing Controller Function outside the module via onClick function call For re-using already defined onClick functions

by austinnoronha

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<br/>
<br/>
<div ng-cloak ng-app="ManagerApp">
    <div id="MainWrap" class="container" ng-controller="ManagerCtrl"> <span class="label label-info label-ext">Exposing Controller Function outside the module via onClick function call</span>

        <hr/>
        <button onClick='ajaxResultPost("Update:Name:With:JOHN","accept",true);'>click me</button>
        <br/> <span class="label label-warning label-ext" ng-bind="customParams.data"></span>

        <br/> <span class="label label-warning label-ext" ng-bind="customParams.type"></span>

        <br/> <span class="label label-warning label-ext" ng-bind="customParams.res"></span>

        <br/>
        <br/>
        <input type="text" ng-model="sampletext" size="60">
        <br/>
        <br/>
        <br/>
    </div>
    <!-- /container -->
</div>
<!-- /app -->

JavaScript

/*app.js tabs*/

var angularApp = angular.module('ManagerApp', []);
angularApp.controller('ManagerCtrl', ['$scope', function ($scope) {

    $scope.customParams = {};

    $scope.updateCustomRequest = function (data, type, res) {
        $scope.customParams.data = data;
        $scope.customParams.type = type;
        $scope.customParams.res = res;
        $scope.sampletext = "input text: " + data;
    };



}]);

function ajaxResultPost(data, type, res) {
    var scope = angular.element(
    document.
    getElementById("MainWrap")).
    scope();
    scope.$apply(function () {
        scope.updateCustomRequest(data, type, res);
    });
}