向指令表单添加额外的方法

时间:2015-09-02 15:05:02

标签: angularjs

我在Angular中有一个自定义表单:

<form rp-form>
  <input type="text" value="one">
  <input type="text" value="two">
  <button type="submit">submit</button>
</form>

我想使用angular指令添加一个方法来处理表单的提交以及输入字段的有效性:

angular.module('app', [])
    .directive('rpForm', function($compile) {
        return {
            scope: true,
            compile: function(tElement, tAttrs) {
                tElement
                    .attr({
                        name: 'testForm',
                        'ng-submit': 'mySubmit($element)'
                    })
                 return {
                     post: function(scope, element) {
                        // $compile(element[0])(scope); //causes infinite loop
                        console.log(scope);
                     }
                 };
            },
            controller: function($scope) {
                $scope.mySubmit = function(e) {
                    console.log('my submit fired');
                };
           }
    };
});

我希望能够使用&#34; mySubmit&#34; postLink函数中的方法,也能够在范围内看到表单指令对象&#34; testForm&#34;。这是否可以使用角度?

Plunker

2 个答案:

答案 0 :(得分:0)

这是不好的做法,但可行。问题是你是用function( full data frame,number of segments I need) { split(full data frame, subset(time segments)) return(appropriate amount of smaller data frames) } 隔离范围。删除该行。

答案 1 :(得分:0)

compile主要用于修改模板,即子DOM元素。并且它在这里看起来并不好看,因为新指令被添加到编译元素本身,因此它应该被重新编译(它显然会导致递归,因此必须另外控制递归行为)。

大多数直截了当的方式是使用rp-form模板的<form ng-submit="mySubmit()" ng-transclude></form>元素指令。

ng-submit指令中没有真正的需要,因为它基本上是adds a listener to the element。你可以在(后)链接中自己完成。由于您无法修改标记,因此它将是

angular.module('app', [])
    .directive('rpForm', function($compile) {
        return {
            scope: true,
            link: function(scope, element, attrs) {
                element.attr({
                    name: 'testForm'
                });
                element.on('submit', function () {
                    scope.$apply('mySubmit()');
                });
                console.log(scope);
            },
            controller: function($scope) {
                $scope.mySubmit = function(e) {
                    console.log('my submit fired');
                };
           }
    };
});

如果mySubmit仅在link中使用,则mCheatButton = (Button)findViewById(R.id.cheat_button); mCheatButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { try { mCheatButton.setVisibility(View.INVISIBLE); mIsCheater = false; int mCurrentIndex=2; Intent i = new Intent(quizactivity.this, CheatActivity.class); i.putExtra(CheatActivity.EXTRA_ANSWER_IS_TRUE, mCurrentIndex); startActivityForResult(i, 0); } catch (Exception e) { } } }); SECOND ACTIVITY: mShowAnswer = (Button)findViewById(R.id.showAnswerButton); mShowAnswer.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if(extras == null) { mAnswerIsTrue= 0; updateanswer(mAnswerIsTrue); } else { mAnswerIsTrue= extras.getInt(EXTRA_ANSWER_IS_TRUE); updateanswer(mAnswerIsTrue); } updateanswer(mAnswerIsTrue); } }); public void updateanswer(int q){ mAnswerTextView.setText(solution[q].getA()); setAnswerShownResult(true); } 对于范围是不必要的。