Javascript 向角度指令提供数据（从文件或数据库）_Javascript_Angularjs_Angularjs Directive

Javascript 向角度指令提供数据（从文件或数据库）

javascript angularjs

Javascript 向角度指令提供数据（从文件或数据库）,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我正在尝试确定正确的方法或角度的方法，以便为构建DOM的指令提供数据。作为我的示例，我试图从一个文件中获取JSON数据，用jsTree构建一个树。问题是在数据到达时而不是事先构建树我通过在控制器中使用$watchingtreeData解决了这个问题。如果我不$watch它，树将以一个空数组作为输入构建，稍后，Angular将更新引用以填充数据。但是我觉得这样做是错误的，因为数据在最初构建树之后不会改变这是我的密码 app.js： var app = angular.module('jsTre

我正在尝试确定正确的方法或角度的方法，以便为构建DOM的指令提供数据。作为我的示例，我试图从一个文件中获取JSON数据，用jsTree构建一个树。问题是在数据到达时而不是事先构建树

我通过在控制器中使用

$watch

ing

treeData

解决了这个问题。如果我不

$watch

它，树将以一个空数组作为输入构建，稍后，Angular将更新引用以填充数据。但是我觉得这样做是错误的，因为数据在最初构建树之后不会改变

这是我的密码

app.js：

var app = angular.module('jsTreeApp', ['ngResource']);

var TestCtrl = function($scope, Data) {
  $scope.treeData = Data.getTreeData();
}

app.directive('jstree', function() {
  return function(scope, element) {
    scope.$watch('treeData.data', function() {
      $(element).jstree({
        "json_data" : scope.treeData,
        "plugins" : [ "themes", "json_data" ]
      });
    })
  }
});

app.factory('Data', function($resource) {
  return $resource('/data/treeData.json', {}, {
    getTreeData: { method: 'GET', isArray: false }
  })
})

index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jsTreeAngular</title>
</head>
<body>

<div ng-controller="TestCtrl" ng-app="jsTreeApp">
  <div jstree></div>
</div>

<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="lib/jstree/jquery.jstree.js"></script>
</body>
</html>


jsTreeAngular

对正确的方法有什么建议吗？

我认为使用$watch没有问题，因为您绑定了它，您需要一些方法来查看数据是否已填充并对其进行操作

我在这里看到的问题是，“treeData”来自哪里并不明显，这可能会让其他开发人员感到困惑

相反，我要做的是定义一个独立的作用域，并用treeData传递一个属性，这样就可以保持它的松散耦合，而不必担心在控制器中更改“treeData”的名称

您可以这样定义隔离范围：

app.directive('jstree', function() {

  return {
      scope: {
             treeData: "="
             }, 
      link: function(scope, element) {
         scope.$watch('treeData.data', function() {
           $(element).jstree({
             "json_data" : scope.treeData,
             "plugins" : [ "themes", "json_data" ]
           });
         })
       }
    }
});