如何將角度的$ scope.mydata綁定到使用jeasyui的數據選項？

我使用基本ComboTree從jeasyui.com

index.js

$http.get("GetDataForTree") 
      .success(function (response) { 
       $scope.Mydata= response; 
       SpinStop(); 
      });

在CSHTML

<input class="easyui-combotree" 
    data-options="url:'tree_data1.json',method:'get',required:true" style="width:200px;">

如何綁定$ scope.Mydata內部數據的選項？

來源

2015-08-27 Neo

這是工作示例。希望這將解決您的問題...

創建服務獲得遠程數據

app.service('treeData', ['$http',function($http){ 
    this.getData = function(){ 
     return $http.get('tree_data1.json'); 
    } 
}]);

tree_data1.json數據

[{ 
    "id":1, 
    "text":"My Documents", 
    "children":[{ 
     "id":11, 
     "text":"Photos", 
     "state":"closed", 
     "children":[{ 
      "id":111, 
      "text":"Friend" 
     },{ 
      "id":112, 
      "text":"Wife" 
     },{ 
      "id":113, 
      "text":"Company" 
     }] 
    },{ 
     "id":12, 
     "text":"Program Files", 
     "children":[{ 
      "id":121, 
      "text":"Intel" 
     },{ 
      "id":122, 
      "text":"Java", 
      "attributes":{ 
       "p1":"Custom Attribute1", 
       "p2":"Custom Attribute2" 
      } 
     },{ 
      "id":123, 
      "text":"Microsoft Office" 
     },{ 
      "id":124, 
      "text":"Games", 
      "checked":true 
     }] 
    },{ 
     "id":13, 
     "text":"index.html" 
    },{ 
     "id":14, 
     "text":"about.html" 
    },{ 
     "id":15, 
     "text":"welcome.html" 
    }] 
}]

創建指令說「comboTreeDirective」，並添加指令作爲comboe tree元素的屬性

app.directive('comboTreeDirective', function(treeData){ 
    return { 
     restrict: 'A', 
     link: function($scope, $elem, $attr){ 
      treeData.getData().success(function(response){ 
       $elem.combotree('loadData', response); 
      }); 
     } 
    } 
    });

使用如下所示的指令

<input class="easyui-combotree" data-options="required:true" style="width:200px;" combo-tree-directive>

下面是完整的工作示例

<!DOCTYPE html> 
<html ng-app='myApp'> 
<head> 
    <meta charset="UTF-8"> 
    <title>Basic ComboTree - jQuery EasyUI Demo</title> 
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"> 
    <link rel="stylesheet" type="text/css" href="themes/icon.css"> 
    <link rel="stylesheet" type="text/css" href="vendor/demo.css"> 
    <script type="text/javascript" src="vendor/jquery.min.js"></script> 
    <script type="text/javascript" src="vendor/jquery.easyui.min.js"></script> 
    <script type="text/javascript" src="vendor/angular/angular.js"></script> 
</head> 
<body ng-controller="comboTreeCtrl"> 
    <h2>Basic ComboTree</h2> 
    <p>Click the right arrow button to show the tree panel.</p> 
    <div style="margin:20px 0"></div> 
    <input class="easyui-combotree" data-options="required:true" style="width:200px;" combo-tree-directive> 

<script type="text/javascript"> 


var app = angular.module('myApp',[]); 
app.controller('comboTreeCtrl', function ($scope, $http){ 

}); 

app.service('treeData', ['$http',function($http){ 
    this.getData = function(){ 
     return $http.get('tree_data1.json'); 
    } 
}]); 

app.directive('comboTreeDirective', function(treeData){ 
    return { 
     restrict: 'A', 
     link: function($scope, $elem, $attr){ 
      treeData.getData().success(function(response){ 
       $elem.combotree('loadData', response); 
      }); 
     } 
    } 
}); 
</script> 
</body> 
</html>

來源

2015-08-27 07:38:38

您可以創建一個指令[將指令設置爲輸入元素的屬性]，並在指令內使用loadData設置數據，當解約時。

<input class="easyui-combotree" my-combotree 
data-options="url:'tree_data1.json',method:'get',required:true" style="width:200px;"> 


//Within myCombotree directive link function 
link: function link(scope, element, attrs) { 
     $http.get("GetDataForTree") 
     .success(function (response) { 
      //$scope.Mydata= response; 
      element.combotree('loadData', response); 
      SpinStop(); 
     }); 
}

來源

2015-08-27 05:44:50 Bharat

如何將角度的$ scope.mydata綁定到使用jeasyui的數據選項？

回答

相關問題