从控制器调用指令方法 [英] calling a directive method from controller
问题描述
我正在创建一个带有 angular 的指令,并且我正在使用 kendo-window
控件.现在我想根据控制器的要求打开那个剑道窗口.简单来说,我想在单击按钮时从 controller
调用 directive
的方法.
这是我的代码示例
sample.directive('workorderwindow', [initworkorderwindow]);函数 initworkorderwindow() {返回 {链接:函数(范围、元素、属性){},限制:'E',模板:"<div data-kendo-window='window.control' data-k-options='window.config'> HELLOW RORLD </div>",范围: {},控制器:函数($scope){$scope.window ={控制:空,配置:{ 标题:'你好世界',可见:假}}$scope.open = 函数 () {$scope.window.control.center().open();}}}}
<块引用>
HTML
现在我想从我的控制器调用那个指令 open 方法.
sample.controller('datacontroller', ['$scope', 'datafac', initcontroller]);函数 initcontroller($scope, datafac) {$scope.onsampleclick = 函数 () {//从这里}
直接从控制器调用指令的函数可能是一种不好的做法.你可以做的是创建一个服务,从你的控制器调用它并在你的指令中注入这个服务.使用 $watch 您将能够触发您的指令功能.
Controller 和 Directive 之间的服务
app.factory('myWindowService', function () {返回 {windowIsOpen : 空,打开窗口:函数(){this.windowIsOpen = true;},关闭窗口:函数(){this.windowIsOpen = false;}};
您的指令:
app.directive('workorderwindow', function () {返回 {限制:'E',模板:<div>test</div>",控制器:函数($scope,myWindowService){$scope.windowService = myWindowService;$scope.$watch("windowService.windowIsOpen", function (display) {如果(显示){console.log("in 指令");//$scope.window.control.center().open();}//你也可以在这里关闭它});}};})
并从您的控制器调用它
app.controller('datacontroller', function ($scope, myWindowService) {$scope.open = 函数 () {myWindowService.openWindow();}//$scope.close = ...});
这里有一个工作小提琴 http://jsfiddle.net/maxdow/ZgpqY/4/
I am creating a directive with angular and in that i am using kendo-window
control. Now i want to open that kendo window on demand from controller. In simple words i want to call a method of directive
from controller
on button click.
Here is my code sample
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>
Now i want to call that directive open method from my controller.
sample.controller('datacontroller', ['$scope', 'datafac', initcontroller]);
function initcontroller($scope, datafac) {
$scope.onsampleclick = function () {
//FROM HERE
}
It's probably a bad practice to directly call a function of your directive from a controller. What you can do is create a Service, call it from your controller and injecting this service in your directive. With a $watch you will be able to trigger your directive function.
The service between Controller and Directive
app.factory('myWindowService', function () {
return {
windowIsOpen : null,
openWindow: function () {
this.windowIsOpen = true;
},
closeWindow: function () {
this.windowIsOpen = false;
}
};
Your directive :
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
});
}
};
})
And to call it from your controller
app.controller('datacontroller', function ($scope, myWindowService) {
$scope.open = function () {
myWindowService.openWindow();
}
// $scope.close = ...
});
Here a working Fiddle http://jsfiddle.net/maxdow/ZgpqY/4/
这篇关于从控制器调用指令方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!