Javascript Angularjs指令从ajax调用控制器获取数据

我正在尝试将jQuery花式树插件与Angular一起使用。树的源数据来自控制器中的ajax调用。然后，我尝试将这些数据输入到我的指令中，并加载树。假设服务需要2秒钟才能获取数据。这是我的代码的精简版本

HTML

控制器

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将花式树加载到页面上（因此正在调用该指令），但没有数据。我还将数据绑定到页面上的一个表上，以确保其加载正常且工作正常。我错过了什么

---

这是正确的方法吗？

您不需要查看指令中的范围，因此这应该是指令链接方法的代码：

link: function (scope, element, attrs) {
    $(element).fancytree({
         source: scope.sc
    });
}

---

您可能还希望在路由解析中调用AJAX，以便在控制器启动时准备好它。使代码更加清晰。

您可以让指令等待数据被检索出来。您的手表可能会在检索数据之前执行一次，因此只需检查手表中的值，以确保它已被检索。大概是这样的：-

        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 if

指令，前提是您的指令的优先级低于ng if。在定义

sc

之前，r指令将不会渲染

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

使用1.3.x，您甚至可以使用1次绑定

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

scope.sc的值是多少？scope.sc是一个json数组，包含要加载到树中的父级/子级，每个项只包含键、标题和子级（如果有的话）。起初我认为我不需要手表，但当我将调试器设置为在$（元素）上断开时。fancytree({，scope.sc是未定义的。Hmmm…如果将AJAX调用放入resolve中，它很可能会工作，但我想知道为什么scope是未定义的。谢谢，这是可行的。你说得对，在检索数据之前，手表只执行了一次。调用unwatch（）会怎么样在if中删除watch？@garethb

scope.$watch

重新运行一个函数，该函数在执行时删除特定的watch.ng-if与另一个scope变量（即默认为false的dataLoaded）完美配合，在ajax成功时将其设置为true。

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

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