Zizzamia / ng-tasty

A tasty collection of reusable UI components for Angular, like grandma used to make. Like Table directive, WebSocket / Debounce / Throttle service, Range / Camelize / Slugify filters
MIT License
435 stars 64 forks source link

ng-tasty in dialog #135

Open dvrakas opened 9 years ago

dvrakas commented 9 years ago

I have a table in a dialog but get getResource is not a function. It seem if the table is in a dialog then it cant access the scope.

Zizzamia commented 9 years ago

Can you please show me your JS and HTML implementation please.

dvrakas commented 9 years ago

 $scope.getResource = function (params, paramsObj) {
            $scope.params = params;
            $scope.paramsObj = paramsObj;

            console.log("alert")

           return ServiceProUserResource.getAllPros().then(function (data) {

              return  $scope.servicepros = {
                    "header": [{
                        "key": "name",
                        "name": "Name"
                    }, {
                        "key": "star",
                        "name": "Star"
                    }, {
                        "key": "sf-location",
                        "name": "SF Location"
                    }
                    ],
                    "rows": data.data,
                    "pagination": {
                        "count": 5,
                        "page": 2,
                        "pages": 7,
                        "size": 34
                    },
                    "sort-by": "firstName",
                    "sort-order": "asc"
                }

            });
        }

    }

    app.controller("ServiceProCtrl", ["$scope", "$http", "listItemId", "resource.ProLists", "resource.ServiceProUsers", ServiceProController]);

//in directive
 ModalService.showModal({
                    controller: "ServiceProCtrl",
                    templateUrl: "/scripts/app/components/users/user-select.temp.html",

                    inputs: {
                        title: "Update List",
                        listItemId: $scope.listId

                    }
                }).then(function(modal) {

                    modal.element.modal();
                    modal.close.then(function(result) {

                        ProLists.saveProNamedList({ listName: result.name })
                            .then(function(data) {

                                $scope.pros.push({ listName: result.name });
                            });
                    });
                });
<div class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-body" style=" max-height: 420px;overflow-y: auto;">

                <div tasty-table bind-resource-callback="getResource"  >
                    <table class="table table-striped table-condensed">
                        <thead tasty-head>

                        <tbody>
                            <tr ng-repeat="row in rows">
                                <td><a href ng-click="addToList(row)"><i class="fa fa-plus-circle fa-fw green"></i></a></td>
                                <td>{{row.firstName}}</td>
                                <td>{{row.lastName}}</td>
                                <td>{{row.telephone}}</td>

                                <td><a ng-href="mailto:{{row.email}}">{{row.email }}</a></td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="5" class="text-center">
                                    <div tasty-pagination></div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>

                </div>

            </div>
            <div class="modal-footer">
                <button type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal">Close</button>

            </div>
        </div>
    </div>
</div>

Error: AngularJS tastyTable directive: the bind-resource-callback (getResource) is not a function
   at Anonymous function (http://localhost:64413/Scripts/app/vendor/ng-tasty/ng-tasty-tpls.js:164:7)
   at invoke (http://localhost:64413/Scripts/app/vendor/angular/angular.js:4203:7)
   at Anonymous function (http://localhost:64413/Scripts/app/vendor/angular/angular.js:8493:11)
   at Anonymous function (http://localhost:64413/Scripts/app/vendor/angular/angular.js:7739:13)
   at forEach (http://localhost:64413/Scripts/app/vendor/angular/angular.js:331:11)
   at nodeLinkFn (http://localhost:64413/Scripts/app/vendor/angular/angular.js:7738:11)
   at compositeLinkFn (http://localhost:64413/Scripts/app/vendor/angular/angular.js:7117:13)
   at compositeLinkFn (http://localhost:64413/Scripts/app/vendor/angular/angular.js:7120:13)
   at compositeLinkFn (http://localhost:64413/Scripts/app/vendor/angular/angular.js:7120:13)
   at compositeLinkFn (http://localhost:64413/Scripts/app/vendor/angular/angular.js:7120:13) undefined
Zizzamia commented 9 years ago

From the code you share the $scope.getResource is not in your ServiceProCtrl. As you said, the $scope.getResource just is not present in the $scope of your Modal.

samkadam commented 7 years ago

hello i want to add checkbox to select all rows in table .