2014-05-07 111 views
1

我正在創建一個指令與角度,因爲我使用kendo-window控制。現在我想根據控制器的需求打開那個kendo窗口。簡單地說,我想在按鈕點擊時調用directivecontroller的方法。從控制器調用指令方法

這裏是我的代碼示例

sample.directive('workorderwindow', [initworkorderwindow]); 
    function initworkorderwindow() { 
     return { 
      link: function (scope, elements, attrs) { 
      }, 
      restrict: 'E', 
      template: "<div data-kendo-window='window.control' data-k-options='window.config'> HELLOW RORLD </div>", 
      scope: { 

      }, 
      controller: function ($scope) { 
       $scope.window = 
        { 
         control: null, 
         config: { title: 'HELLO WORLD', visible: false } 
        } 
       $scope.open = function() { 
        $scope.window.control.center().open(); 
       } 
      } 
     } 
    } 

HTML

<workorderwindow></workorderwindow> 

現在我想調用指令open方法從我的控制器。

sample.controller('datacontroller', ['$scope', 'datafac', initcontroller]); 
     function initcontroller($scope, datafac) { 
      $scope.onsampleclick = function() { 
//FROM HERE 
      } 
+0

這個例子適合你嗎? – Maxdow

回答

1

從控制器直接調用您的指令函數可能是一種糟糕的做法。你可以做的是創建一個服務,從你的控制器調用它並在你的指令中注入這個服務。使用$ watch,您將能夠觸發您的指令功能。

控制器和指令

之間的服務
app.factory('myWindowService', function() { 
return { 
    windowIsOpen : null, 
    openWindow: function() { 
     this.windowIsOpen = true; 
    }, 
    closeWindow: function() { 
     this.windowIsOpen = false; 
    } 
}; 

你的指令:

app.directive('workorderwindow', function() { 
return { 
    restrict: 'E', 
    template: "<div>test</div>", 
    controller: function ($scope, myWindowService) { 
     $scope.windowService = myWindowService; 

     $scope.$watch("windowService.windowIsOpen", function (display) { 
      if (display) { 
       console.log("in directive"); 
       //$scope.window.control.center().open(); 
      } 
      // You can close it here too 
     }); 
    } 
}; 
}) 

並調用它從你的控制器

app.controller('datacontroller', function ($scope, myWindowService) { 
    $scope.open = function() { 
     myWindowService.openWindow(); 
    } 
    // $scope.close = ... 
}); 

這裏工作小提琴http://jsfiddle.net/maxdow/ZgpqY/4/

+0

我更新了示例,因爲它不是先工作並添加了Jsfiddle。 – Maxdow

相關問題