Run AngularJS function by jQuery

Question

I've below code and want to call one Angular function form jQuery. I followed codes I found on stackoverflow questions but it does not work.

(function() {

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

  bng_app.controller("myCtrl", function($scope) {

    $scope.wrap_up_errors = [{
      Name: "Alfreds Futterkiste",
      City: "Berlin",
      Country: "Germany"
    }];

    $scope.wrapUpError = function(a) {
      $scope.wrap_up_errors = a;
      console.log($scope.wrap_up_errors)
    }

  });
})();

function myFunc() {
  angular.element($('#home')).scope().wrapUpError([{
    Name: "1",
    City: "2",
    Country: "3"
  }]);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body id="home" data-ng-app="myApp" data-ng-controller="myCtrl">

  <div class="exist-file-alert" id="exist-file-alert-id">
    <table>
      <tbody>
        <tr data-ng-repeat="x in wrap_up_errors">
          <td>{{ x.Name }}</td>
          <td>{{ x.Country }}</td>
        </tr>
      </tbody>
    </table>
  </div>

<button onclick="myFunc()">Click</button>

</body>

Why data binding does not work in above snippet?

FYI I know this code does not need jQuery but this is a part of bigger functions and I need jQuery to handle myFunc() function.

I can’t help but wonder why so many devs insist that they need jQuery in an Angular app... it’s a really bad combination since they both handle the DOM in very different ways. If you need jQuery.ajax, there are other solutions for that... — Kokodoko
– Kokodoko, Commented Jan 27, 2018 at 12:04
@Kokodoko I have a jQuery function which checks for errors in page inputs then AngularJS shows a list of errors in separate part of page. I think this is taking advantage of both libraries since they do not interfere with each other functionalities. — ata
– ata, Commented Jan 27, 2018 at 12:11
Hmm but you really shouldn’t use jQuery to access page elements at all. That’s why Angular provided data binding. — Kokodoko
– Kokodoko, Commented Jan 28, 2018 at 16:50

ahmetugurbulut · Accepted Answer · 2018-01-27 11:33:48Z

You can add $scope.$apply() in $scope.wrapUpError function.

(function() {

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

  bng_app.controller("myCtrl", function($scope) {

    $scope.wrap_up_errors = [{
      Name: "Alfreds Futterkiste",
      City: "Berlin",
      Country: "Germany"
    }];

    $scope.wrapUpError = function(a) {
      $scope.wrap_up_errors = a;
      $scope.$apply()
      console.log($scope.wrap_up_errors)
    }

  });
})();

function myFunc() {
  angular.element($('#home')).scope().wrapUpError([{
    Name: "1",
    City: "2",
    Country: "3"
  }]);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body id="home" data-ng-app="myApp" data-ng-controller="myCtrl">

  <div class="exist-file-alert" id="exist-file-alert-id">
    <table>
      <tbody>
        <tr data-ng-repeat="x in wrap_up_errors">
          <td>{{ x.Name }}</td>
          <td>{{ x.Country }}</td>
        </tr>
      </tbody>
    </table>
  </div>

<button onclick="myFunc()">Click</button>

</body>

Collectives™ on Stack Overflow

Run AngularJS function by jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related