Question

我遇到指令transclude和form指令的问题。您可能知道，如果您将“name”属性添加到表单标记中，表单将最终出现在“范围”中，然后您可以检查表单验证等等。

当我将表单标记放在使用transclude的指令中时，我的问题开始了。我知道如何使用双向数据绑定来解决这个问题，如https://stackoverflow.com/a/14484903/1029874所述 - “使用对象而不是原语”

但是我的表格最终在transcluding指令范围内。这是我想要做的一个例子。

 <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/

有没有办法可以绕过这种行为？

谢谢！

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

如何防止transcluding指令为form指令创建新的子范围？

1 个答案: