【问题标题】:calling a directive method from controller从控制器调用指令方法
【发布时间】:2014-05-07 06:36:07
【问题描述】:

我正在创建一个带有角度的指令,并且我正在使用kendo-window 控件。现在我想根据控制器的需要打开那个剑道窗口。简单来说,我想在单击按钮时从controller 调用directive 的方法。

这是我的代码示例

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
            }

【问题讨论】:

  • 这个例子对你有用吗?

标签: angularjs angularjs-directive


【解决方案1】:

直接从控制器调用指令的函数可能是一种不好的做法。你可以做的是创建一个服务,从你的控制器调用它,然后在你的指令中注入这个服务。使用 $watch 你将能够触发你的指令函数。

Controller 和 Directive 之间的服务

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/

【讨论】:

  • 我更新了示例,因为它首先没有工作并添加了一个 Jsfiddle。
猜你喜欢
  • 1970-01-01
  • 2018-04-22
  • 1970-01-01
  • 2013-01-30
  • 1970-01-01
  • 2013-05-16
  • 1970-01-01
  • 2015-03-22
  • 1970-01-01
相关资源
最近更新 更多