Question

我在angularjs app中使用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);
          }
        }
      }
    };
  }])

Answer 1

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

scope:{

validator:'&'

}

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

<step validator='validator'/>

Answer 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>。

从自定义指令

2 个答案: