从 Kendo Grid 列上的链接调用函数

Question

我同时使用 AngularJS 和 Kendo Grid。我有三个文件：HTML（包含要显示的视图）、控制器（视图和模型之间的坐标）、服务（业务逻辑）。我有一个剑道网格和一个按钮。我希望按钮在单击 Kendo Grid 列上的链接时显示/隐藏。下面是代码sn-p。

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

我可以看到 Kendo Grid 及其列上的链接，但我无法通过控制器单击此列时显示/隐藏按钮。请帮助我在这里需要纠正的地方，或者我应该遵循其他方法来实现这一点。

提前致谢。

Answer 1

您模板中的this.changeShow() 只是一个字符串，它与您在服务中定义的实际changeShow 函数没有任何关系。

当您单击链接时，ng-click 将根据当前的 $scope 评估表达式 this.changeShow()。

你可以把它放在你的控制器中来验证它：

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

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

您可以采取多种途径来解决这个问题。最简单的是将逻辑从服务移到控制器中。