Question

我有一个指令，在t.start（）调用时打开一个bootstrap-tours：

   app.directive('tourGuide', function ($parse, $state) {
           var directiveDefinitionObject = {
               restrict: 'E',
               replace: false,
               link: function (scope, element, attrs) {
                   var t = new Tour({container: $("#main"),
                        backdrop: false,
                        debug:true
                    });
                    t.addStep({
                        element: "#main",
                        title: "Title123",
                        content: "Content123"
                    });
                    t.init();
                     t.start();                 
               }};
        return directiveDefinitionObject;
    });

我想创建一个按钮，点击它可以调用变量t.start（）。它甚至可能吗？我想实现这一点，因此可以独立于控制器内的函数，因为这个指令将在应用程序的每个单独视图上，所以如果它可以调用自身内部的参数会很好。我试图用一个按钮在指令中创建一个模板，然后用t.start（）添加一个ng-clikc动作，当然它失败了，因为控制器不知道我的指令所在的变量t。

示例：

假设我有2个视图ShowItems和CreateItem他们有2个不同的控制器。在这些视图中我有1个按钮/链接，点击它我想显示我的TourGuide。多数民众赞成。

现在在我的TourGuide中，我有两个不同的步骤，当我按下CreateItem视图中的按钮时，我想在CreateItem视图的导游中看到步骤，反之亦然。

如果我在控制器中使用函数，那很简单。但是有可能只使用指令，因为我可以有20个不同的控制器吗？

Answer 1

基于一些假设 - 我假设你想要的是从指令动态调用范围中的例程。以下面的代码为例

HTML /查看代码

<div my-directive="callbackRoutine">Click Here</div>

<强>控制器

function MyController($scope) {
    $scope.callbackRoutine = function () {
       alert("callback");
    };
}

<强>指令

app.directive("myDirective", function () {
  return {
    restrict: 'A',
    link: function (scope, element, attr){
      element.bind('click', function (){
        if (typeof scope[attr.myDirective] == "function"){
          scope[attr.myDirective]();
        }
      });
    }
  };
});

在此，您将回调例程指定为指令的一部分。等式的关键是指令的范围继承自任何父范围，这意味着您甚至可以从传递给指令的范围调用例程。要查看此示例，请参阅以下plunkr：http://plnkr.co/edit/lQ1QlwwWdpNvoYHlWwK8?p=preview。希望有所帮助！

在Angular Directive中创建“嵌套”ng-click

1 个答案: