使用多次包含kendo元素的指令

Question

我有以下指令

angular.module("KendoDemos", [ "kendo.directives" ])


.directive('myDirective',function(){
  return{
    template:'<div k-on-resize="resized()" kendo-splitter k-orientation="horizontal"id="splitter"><div><div kendo-grid="myGrid" options="mainGridOptions"></div></div><div><p>{{hello}}</p></div></div></div></div>',
    scope:{},
    controller:function($scope,$element){
      $scope.hello = "Hello from Controller!";


      $scope.mainGridOptions = {
        dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                }
            },
        columns: [{
                template: "<div class='customer-photo'" +
                                "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                            "<div class='customer-name'>#: ContactName #</div>",
                field: "ContactName",
                title: "Contact Name",
            }, {
                field: "ContactTitle",
                title: "Contact Title"
            }, {
                field: "CompanyName",
                title: "Company Name"
            }, {
                field: "Country",
            }]
      };

      $scope.resized = function(){

        if($("#splitter .k-pane:first").css("width") < '350px'){
        $scope.myGrid.hideColumn("ContactName");
        $scope.myGrid.hideColumn("Country");
        }else{
        $scope.myGrid.showColumn("ContactName");
        $scope.myGrid.showColumn("Country"); 
        }
      };
    }

  }
  })

基本上只是使用一些数据和使用kendo分离器创建一个剑道网格，网格位于分割器的左侧。我在kendo分离器上附加了一个事件，如果宽度是＆lt; 300px网格将隐藏一些列。

如果在一个页面上只使用一次该指令，则该指令可以正常工作，但如果多次使用则不能正常工作。如何解决这个问题??