Angular-Kendo窗口自定义动作

Question

我正在尝试使用Angular-Kendo创建一个带有自定义操作的窗口，但遇到了一个问题。

当使用Kendo (减去angular)时，我会添加功能like explained here

window.data("kendoWindow").wrapper.find(".k-i-custom").click(function(e){
    alert("Custom action button clicked");
    e.preventDefault();
});

然而，在Angular-Kendo中，对window对象的访问是通过$scope.windowname进行的，并且只有在kendo-window="windowname"指令之后才可用。

我目前正在通过绑定k-on-open上的操作来绕过这一点，比如...

    var firstLoad = true;

    this.onOpenCallback = function () {

        if (firstLoad) {
            $scope.messageBodyWindow.wrapper.find(".k-i-custom").click(function (e) {
                alert("OMG");
            });
            firstLoad = false;
        }

然而，这个解决方案感觉像是一个廉价的黑客。有没有一种“适当”的方法来实现这一点？

Answer 1

您可以将Angular-Kendo指令包装在自定义指令中，并将所需的功能放入link函数中。这将注册您的自定义绑定一次，而无需任何这种“第一次打开窗口布尔”的黑客行为。

  <div custom-kendo-window>
  </div>

自定义指令在其模板中包含kendo指令...

.directive('customKendoWindow', function(){
  return {
    template: '<div kendo-window="win" k-title="\'Window\'" k-width="600" k-height="200" k-visible="false"> <div id="customAction" style="cursor: pointer;">custom click action</div></div>',
    link: function(scope, element, attrs){
        $('#customAction').bind('click', function(){
          alert('Custom action fired!');
        })
    }
  }
})

下面是一个code pen，显示了如上所示的简单包装器，然后是一个可配置的包装器，在每个指令的链接函数中设置了单击绑定。