(파일 또는 데이터베이스에서) Angular 지시어에 데이터 제공

올바른 방법이나 DOM을 생성하기 위해 지시문에 데이터를 제공하는 각도 방법을 결정하려고합니다. 필자는 jsTree를 사용하여 JSON 데이터를 파일에서 가져 와서 트리를 구성하려고합니다. 문제는 데이터가 도착했지만 사전에 트리가 생성되지 않았을 때 트리를 생성하는 것입니다.(파일 또는 데이터베이스에서) Angular 지시어에 데이터 제공

컨트롤러에서 $watch을 입력하고 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>

어떤 제안?

출처

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

(파일 또는 데이터베이스에서) Angular 지시어에 데이터 제공

답변

관련 문제