向Angular指令提供數據（來自文件或數據庫）

我試圖確定正確的方式或角度的方式來提供數據，以指導構建DOM。作爲我的例子，我試圖從一個文件中獲取JSON數據來構建一個jsTree樹。問題是在數據到達時而不是預先構建樹。向Angular指令提供數據（來自文件或數據庫）

我在我的控制器中解決了$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>

正確的方式做到這一點有什麼建議？

來源

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指令提供數據（來自文件或數據庫）

回答

相關問題