CODEWITHSUNDEEP
angularjsfancytree
jinji
jinji

Reputation: 13

angularjs binding in scope not in ui

i am using jquery fancytree plug in in my angularjs and i am trying to use the 'activate' event to call a function inside the $scope. if i breakpoint the code - it looks good , but its not showing in the html.

here is my code:

app.controller('ctrl', ['$scope', 'treeSvc', function ($scope, treeSvc) {

  $scope.selectedNode = null;

  $scope.SetSelectedNode = function(newNode){
    $scope.selectedNode = newNode; 
    //a break point here shows that  $scope.selectedNode is really changing but its not showing in the html.  calling this function outside the fancy tree - works.
  }

  treeSvc.get()
    .then(function (response) {
      $("#tree").fancytree({
        source: response.data,
        activate: function(event, data) {
          $scope.SetSelectedNode(data.node);
        }
      });
    },
    function () {
      alert('error getting tree data');
    });

}]);

Html

{{selectedNode | json}}

any ideas why?

Upvotes: 0

Views: 1207

Answers (1)

meriadec
meriadec

Reputation: 2983

As your event is fired "outside" of angular, you need to refresh the scope manually :

$("#tree").fancytree({
  source: response.data,
  activate: function(event, data) {
    $scope.SetSelectedNode(data.node);
    $scope.$apply();
  }
});

See here for more infos : https://docs.angularjs.org/guide/scope

Upvotes: 2

Related Questions