从自定义指令调用基于 angularjs 控制器的方法答案

【问题标题】：calling angularjs controller based method from custom directive从自定义指令调用基于 angularjs 控制器的方法
【发布时间】：2017-06-24 14:24:33
【问题描述】：

我在我的 angularjs 应用程序中使用 jquery 步骤。我使用自定义指令来初始化 jquery 插件。现在我需要在表单的最后一步单击完成按钮后验证所有输入。为了做到这一点，我知道需要设置一个名为 onFinished 的选项。现在如何在本节中调用我的控制器方法？

app.directive('step', [function() {
    return {
      restrict: 'EA',
      scope: {
        stepChanging: '='
      },
      compile: function(element, attr) {
          element.steps({
          labels: {finish: "SUBMIT"},  
          headerTag: "h3",
          bodyTag: "section",
          transitionEffect: "slideLeft",
          stepsOrientation: "vertical",
          onFinished: function (event, currentIndex) {
             console.log("submit button has been clicked");

             $scope.validator(); //problem here 

          }
        });
        return {
          //pre-link
          pre:function() {},
          //post-link
          post: function(scope, element) {
            //element.on('stepChanging', scope.stepChanging);
          }
        }
      }
    };
  }])

【问题讨论】：

你说的是页面控制器，还是这个指令的控制器？
@rrd 页面控制器。具有表单的控制器。我有一个方法叫做验证器

标签： angularjs jquery-steps

【解决方案1】：

你的指令是独立作用域，它不能访问控制器作用域，如果你想传递函数，你可以在你的指令的作用域对象中使用&，如下所示

scope:{

validator:'&'

}

并在您的指令中传递此函数，如下所示

<step validator='validator'/>

【讨论】：

你的意思是在我的控制器中我可以像这样传递这个函数吗？
是的，请检查这个问题stackoverflow.com/questions/18378520/…

【解决方案2】：

要将事件从具有隔离范围的指令传递到父控制器，请使用表达式& 绑定。

在指令编译阶段，没有函数使用范围。
将函数移至 postLink：

app.directive('step', function() {
    return {
      restrict: 'EA',
      scope: {
        //stepChanging: '=',
        stepChanging: '<',
        //USE expression binding
        validator: '&'
      },
      //compile: function(element, attr) {
      link: function postLink(scope,element,attrs) {
          element.steps({
              labels: {finish: "SUBMIT"},  
              headerTag: "h3",
              bodyTag: "section",
              transitionEffect: "slideLeft",
              stepsOrientation: "vertical",
              onFinished: function (event, currentIndex) {
                 console.log("submit button has been clicked");

                 //$scope.validator(); //problem here 
                 scope.validator();
              }
          );
        } 
        /*
        return {
          //pre-link
          pre:function() {},
          //post-link
          post: function(scope, element) {
            //element.on('stepChanging', scope.stepChanging);
          }
        }*/
      }
    };
});

用法：

<step step-changing="vm.changing" validator="validator()">
</step>

继续前进，避免使用双向= 绑定。而是使用单向< 绑定。它更高效，并为迁移到 Angular 2+ 提供了更好的途径。

同时避免使用/> 关闭元素指令，这会导致某些浏览器出现问题。而是使用结束标记 </step>。

【讨论】：