如何使用easyui将角度中的$scope.data绑定到数据选项？答案

【问题标题】：how to bind $scope.mydata in angular to data-options using jeasyui?如何使用easyui将角度中的$scope.data绑定到数据选项？
【发布时间】：2015-08-27 05:08:50
【问题描述】：

我正在使用来自 jeasyui.com 的 Basic ComboTree

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;">

如何在 data-options 中绑定 $scope.Mydata ？

【问题讨论】：

标签： javascript jquery angularjs jquery-easyui

【解决方案1】：

这是一个工作示例。希望这能解决您的问题...

创建一个服务来获取远程数据

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”并将该指令作为属性添加到组合树元素

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>

【讨论】：

【解决方案2】：

您可以创建一个指令 [将指令设置为输入元素的属性]，并在该指令内使用 loadData 在 promise 被解析时设置数据。

<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();
         });
}

【讨论】：