Angularjs指令从控制器Ajax调用获取数据 [英] Angularjs directive to get data from ajax call in controller

问题描述

我试图使用jQuery的花式树插件有棱有角。对于树的原始数据来自于我的控制器Ajax调用。我则试图让这些数据转化为我的指令并加载树。假设该服务需要2秒，获取数据。下面有一个减少的版本我的code。

I'm trying to use the jQuery fancy tree plugin with Angular. The source data for the tree comes from an ajax call in my controller. I'm then trying to get that data into my directive and load the tree. Say the service takes 2 seconds to get the data. Heres a cut down version of my code.

HTML

<div tree-view ></div>

服务

angular.module('sc.services', []).
  factory('scService', function ($http) {

      var scApi = {};

      scApi.getsc = function () {
          return $http({
              url: config.Url.sc
          });
      };

      return scApi;
  });

控制器

angular.module('sc.controllers', []).
  controller('scController', function ($scope, scService) {

      scService.getsc().success(function (response) {
          $scope.sc = response;
      });
  });

指令

angular.module('sc.directives', [])
    .directive('treeView',function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch('sc', function() {
                    $(element).fancytree({
                        source: scope.sc
                    });
                });
            }
        }
    });

jQuery的加载看中树到页面上（因此该指令被调用），但没有数据。我也将数据绑定到表在页面上只是为了确保它的加载确定并且工作。我在想什么？

Jquery loads the fancy tree onto the page (so the directive is being called) but without an data. I also bind the data to a table on the page just to make sure its loading ok and that works. What am I missing?

这是这样做的正确方法？

Is this the correct way to do this?

推荐答案

您只需让该指令等到检索数据。您的手表可能会检索数据之前，所以只检查了手表的价值，以确保它已检索到已经执行一次。事情是这样的： -

You could just let the directive wait till the data is retrieved. Your watch might get executed once before the data is retrieved, so just check for the value in the watch to make sure it it has been retrieved already. Something like this:-

        link: function (scope, element, attrs) {

           var unwatch =  scope.$watch('sc', function(v) {
               if(v){ // Check if you got the value already, you can be more specific like angular.isObject/angular.isArray(v)
                 unwatch(); //Remove the watch
                 $(element).fancytree({
                    source: v //or same as scope.sc
                 });
               }
            });

您也可以使用 NG-如果指令的指令元素上，只要你的指令是较低的优先级比NG-如果。你 - [R指令将不会呈现，直到 SC 被定义的。

You could also use ng-if directive on the directive element, provided your directive is of lesser priority than ng-if. You r directive will not render until sc gets defined.

  <div tree-view ng-if="sc"></div>

使用1.3.x中你甚至可以利用1时绑定。

With 1.3.x you could even make use of 1 time binding.

 <div tree-view ng-if="::sc"></div>

这篇关于Angularjs指令从控制器Ajax调用获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！