CODEWITHSUNDEEP
javascriptangularjsangular-uiangular-ui-grid
fauverism
fauverism

Reputation: 1992

Sharing $scope with cellTemplate using ui.grid

I'm using ui.grid to get a list of parts. I've created a column that contains a button which launches a modal. What I'm having trouble with is sharing the scope of the part that is contained in the row. I want to share the properties of that row with the the button that I'm creating using cellTemplate. I then want to share the $scope of the part row with the modal that it will launch.

I'm a bit stumped on how to actually do this.

So far I've tried

• Wrapping an ng-repeat around the button that I want to target. This kind of works but makes the app super slow • Data-binding on the button via ng-class. I can't seem to target this correctly.

How can you share the $scope of an object that you're receiving via $http.get into the ui.grid with elements that you're creating with cellTemplate?

Upvotes: 2

Views: 1698

Answers (3)

Paul
Paul

Reputation: 286

Disclaimer -- I always use controllerAs syntax, so if referencing the controller in the context of HTML is weird to you, just ignore that part and pretend like you setup the methods to be directly on the scope. I also do everything in Typescript, not Javascript, so I'm going to write the pertinent parts of the code in here. They should be easy to plug into your application.

The answer is a combination of the two answers you already have from Sunil and S.Baggy.

What you want to do is use the getExternalScopes() function and attach something to the scope of the HTML where your grid resides. The thing you handed the grid will take in the row and call your modal popup. See below for a little clarification.

Your HTML -

<div ng-controller="MyController as myController">
  <div ui-grid="myController.GridObject" external-scopes="myController"></div>
</div>

By using controllerAs syntax and making the controller the reference in the external scopes, we can now gain access to everything in our controller. So we can call methods in it.. In order to do that, however, we have to use a cellTemplate, which it sounds like you already know how to do, and in that cellTemplate we have to have the following:

ng-click="getExternalScopes().methodToLaunchModal()"

Now the last part of hooking all this up is to write the methodToLaunchModal() method into the controller. For that we're borrowing the code from S.Baggy's answer. Here is a very abbreviated controller with the GridObject (the same one I referenced from the controller above): 

app.controller('MainCtrl', function($scope, $modal) {    
GridObject = {
   ... setup of all the other things
   columnDefs: [{ etc, etc, }, { etc, cellTemplate: '<div ng-click="getExternalScopes().methodToLaunchModal(row.entity)">whatever</div>' }]
};

methodToLaunchModal: function(row) {
   var modalInstance = $modal.open({
                        templateUrl: 'someTemplate',
                        controller: 'ModalController',                       
                        resolve: {
                            rowObject: function () { return row; }
                        }
                    });
   };
});

At this point your modal scope will have an object named rowObject on it that will have all the properties from your row. So you should be able to call rowObject.SomeProperty to get its value.

Apologies if any of the syntax is slightly off.

Upvotes: 2

S. Baggy
S. Baggy

Reputation: 958

I use the bootstrap $modal directive with code like this...

clickFunction: function (event, row) {
                    event.stopPropagation(); // prevents the current row from appearing as selected
                    var modalInstance = $modal.open({
                        templateUrl: 'views/modalcontent.tpl.html',
                        controller: 'ModalMessageController',
                        size: 'lg',
                        resolve: {
                            message: function () { return row.entity.serial_number; }
                        }
                    }
                );

Then I just refer to {{message}} in the template. Of course you could pass in any other piece of data too.

Upvotes: 2

Sunil Vurity
Sunil Vurity

Reputation: 830

You can access row and its properties on row selection or ng-click of that row using externalscopes

ng-click="getExternalScopes().onRowClick(row)"

 onRowClick: function (row) {
                row.entity.Property1; /// and so on for all row properties
             }

Upvotes: 1

Related Questions