angularjs - Calling a function from a link on Kendo Grid column -
i using angularjs , kendo grid together. have 3 files: html (containing view displayed), controller(coordinate between view , model), service(business logic). have kendo grid , button on view. want button show/hide on click of link on column of kendo grid. below code snippet.
html
<div ng-app="myapp"> <div ng-controller="myctrl"> <div id="grid" kendo-grid k-options="kendogrid"></div> <input type="button" id="mybutton" ng-show="showbutton"/> </div> </div>
service:
var myapp = angular.module('myapp',[]); myapp.service('myservice', function () { this.showme = false; this.changeshow = function(){ this.showme = !this.showme; }; this.getkgrid = function () { var kgrid = { datasource: [{"col1":"val1","col2":"val2"}], columns: [{ field: "col1", title: "col1" }, { field: "col2", title: "col2", template: "<a href='\\#' class='link' ng-click='this.changeshow()'>#=col2#</a>" } ] }; return kgrid; }; });
controller:
myapp.controller('myctrl', function ($scope, myservice) { $scope.kendogrid = myservice.getkgrid(); $scope.showbutton = myservice.showme; $scope.$watch(function(){return myservice.showme;}, function (newvalue, oldvalue) { if (newvalue == oldvalue) return; $scope.showbutton = newvalue; }, true); });
i able see kendo grid , link on column not able show/hide button on click of column via controller. please me need correct here or should follow other approach achieve this.
thanks in advance.
the this.changeshow()
in template string, in no way connected actual changeshow
function define in service.
when click on link ng-click
evaluate expression this.changeshow()
against current $scope
.
you can put in controller verify it:
$scope.changeshow = function () { console.log('changeshow'); };
demo: http://plnkr.co/edit/ct6jsxbsro9rrr6m1xgy?p=preview
there multiple routes take solve this. easiest being moving logic service controller.
Comments
Post a Comment