1

我对指令 transclude 和 form 指令有疑问。您可能知道，如果您将“名称”属性添加到表单标签，表单将最终进入“范围”，然后您可以检查表单验证等。

当我将表单标签放在使用 transclude 的指令中时，我的问题就开始了。我知道如何使用双向数据绑定来处理这个问题，正如这里提到的https://stackoverflow.com/a/14484903/1029874—— “使用对象而不是原语”

但是我的表单最终进入了包含指令的范围。这是我想做的一个例子。

 <div ng-controller="appCtrl">
   <widget>
     <widget-header>{{model.property}}</widget-header>
     <widget-body>
        <!-- The form will end up in "widget-body":s scope instead of appCtrl:s scope -->
        <form name="appForm" ng-submit="submit()">
          <input type="text" required ng-model="model.property" />
          <input type="submit" value="submit" />
        </form>
      </widget-body>
    </widget>
 </div>

这是小提琴，http://jsfiddle.net/WLksJ/1/

有没有办法可以解决这种行为？

谢谢！

4

1 回答 1

1

一个有趣的问题，但很容易通过使用来避免的问题

<form name="appForm" ng-submit="submit(appForm.$valid)">

并检查提交函数中的参数。

http://jsfiddle.net/udMJ7/

另一个（也许更好）选项是使用this设置为最后一个控制器的范围（在这种情况下是我们想要的表单控制器）

$scope.submit = function(){
    if(this.appForm.$valid){
        //post the form!!
    }
};

http://jsfiddle.net/udMJ7/1/

于 2013-12-30T18:27:24.120 回答