Как связать $ scope.mydata в угловых с опциями данных, используя jeasyui?

0

Я использую Basic 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 внутри параметров данных?

Теги:
jquery-easyui
jeasyui

2 ответа

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" и добавьте директиву в качестве атрибута для элемента дерева comboe

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>
1

Вы можете создать директиву [установить директиву как атрибут для элемента ввода], а внутри директивы установить данные с помощью 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();
         });
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню