vendredi 29 mai 2015

AngularJS/jQuery - Update Scope

I am working on a legacy system that uses jQuery and had to add AngularJS for a particular feature, however im having issues updating the scope.

Basically, we have a dropdown and when you select an option, we're firing an Ajax call to get an array or objects. This array of objects is then being stored in a global variable, say var myObjs. Basically using the ng-repeat service from Angular, I need to loop through these and render a list.

I am new to Angular, so i'm not sure if this is the way to be done. What I am doing is setting the scope in this way:

$scope.myObjs= myObjs;

However, by doing so, the scope is not changing at all.

Can someone tell me how this can be done? I tried to look around but am finding it a bit hacky having a hybrid of AngularJS & jQuery on the same page.

EDIT: adding sample snippet. Basically on change of the dropdown im firing an ajax call, and store the response (which is an array of objects) in myObjs variable. Then I am trying to set the scope to the value of this variable. Regarding the way I am bootstrapping Angular, this is due to a limitation of the legacy system, which is over 8 years old.

var myObjs = null;


$(function() {
  $("#myHeader").on("change", "#mySelect", function() {
    // perform Ajax Call
  });

});

function ajaxCallback(data) {
  myObjs = data;
}

var myModule = angular.module("GetObjsModule", []);
myModule.controller("MyController", function($scope) {
  $scope.objs = myObjs;
});

angular.element(document).ready(function() {
  var myDiv = $("#myDiv");
  angular.bootstrap(myDiv, ["GetObjsModule"]);
});
<script src="http://ift.tt/1mQ03rn"></script>
<script src="http://ift.tt/Sw98cH">
</script>

<div id="myHeader">
  <select id="mySelect">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
  </select>
</div>

<div id="myDiv">
  <ul ng-controller="MyController">
    <li ng-repeat="x in objs">
      <div>
        {{x.name}} {{x.surname}}: {{x.tel}}
      </div>
      <div>
        <p>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum
          a velit eu ante scelerisque vulputate.
        </p>
      </div>
    </li>
  </ul>
</div>

Aucun commentaire:

Enregistrer un commentaire