1

DOM を構築するためのディレクティブにデータを提供する正しい方法または Angular の方法を決定しようとしています。私の例として、jsTree でツリーを構築するためにファイルから JSON データを取得しようとしています。問題は、事前にではなく、データが到着したときにツリーを構築することです。

コントローラーで$watching することで問題を解決しました。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>

これを行う正しい方法について何か提案はありますか?

4

1 に答える 1

3

$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" ]
           });
         })
       }
    }
});
于 2013-02-03T22:27:37.460 に答える