Поставка данных в Угловую директиву (из файла или базы данных)

Я пытаюсь определить правильный путь или Угловой способ предоставления данных директивам для построения DOM. В качестве примера, я пытаюсь получить данные JSON из файла, чтобы построить дерево с помощью jsTree. Проблема заключается в том, чтобы построить дерево, когда данные прибыли, а не заранее.Поставка данных в Угловую директиву (из файла или базы данных)

Я решил проблему $watch ing treeData в моем контроллере. Если я не сделаю это $watch, дерево будет построено с пустым массивом в качестве входных данных, а позже Угловое будет обновлять ссылку для заполнения данных. Но я чувствую, что это неправильный способ сделать это, поскольку данные не будут меняться после того, как дерево изначально будет построено.

Вот мой код

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>

Любые предложения по правильному пути, чтобы сделать это?

источник

2013-02-03 Joshua Clark

Я не вижу проблемы с использованием $ 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-03 22:27:37

Поставка данных в Угловую директиву (из файла или базы данных)

ответ

Смежные вопросы