2014-12-06 53 views
1

我一起使用AngularJS和Kendo Grid。我有三个文件:HTML(包含要显示的视图),Controller(视图和模型之间的坐标),Service(业务逻辑)。我有一个Kendo Grid和一个按钮。我想让按钮在点击Kendo Grid列上的链接时显示/隐藏。以下是代码片段。从Kendo Grid上的链接调用函数列

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> 

服务:

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

控制器:

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

我能看到剑道电网并在其列中的链接,但我不能显示/隐藏按钮通过控制器点击此列。请帮助我在这里需要纠正的问题,还是应该采取其他方法来实现此目的。

在此先感谢。

回答

1

您的模板中的this.changeShow()只是一个字符串,它并不与您在服务中定义的实际changeShow函数相关联。

当您点击链接ng-click将针对当前的$scope评估表达式this.changeShow()

你可以把这个在你的控制器进行验证:

$scope.changeShow = function() { 
    console.log('changeShow'); 
}; 

演示:http://plnkr.co/edit/cT6jsxbSRO9RRR6m1xgy?p=preview

有你可以采取来解决这个多条路线。最容易的是将逻辑从服务移动到控制器中。

+0

非常感谢您的帮助。在Controller中移动函数之后,它为我工作。其实我不希望任何逻辑出现在Controller中,这就是为什么试图找出通过服务来做到这一点的方法。我正面临链接点击的另一个问题。我想在包含该行的详细数据的行的列上点击一个弹出窗口。类似于http://demos.telerik.com/kendo-ui/grid/custom-command中给出的内容。但我希望这可以通过单击现有列的链接而不是角度服务中的新自定义按钮来实现。请指导我。 – pogo22 2014-12-07 15:19:12

+0

我会尽力帮忙。但是请接受答案,以便将其解决并提出新问题,以便其他人可以针对新问题提供解决方案。 – tasseKATT 2014-12-07 15:28:10