blocks|key|174054|text|可以，您可以在控制器中访问表单(如docs中所述)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|174055|除非表单是，而不是在控制器范围中定义的，而是在子范围中定义的表单。|style|BOLD|174056|基本上，一些angular指令，如ng-if、ng-repeat或ng-include，将创建一个独立的子范围。任何定义了scope:+{}属性的自定义指令也是如此。也许，你的基础组件也在你的道路上。|CODE|174057|在<form>标记周围引入一个简单的ng-if时，我也遇到了同样的问题。|174058|有关更多信息，请参阅以下内容：|174059|174060|https://groups.google.com/forum/#!topic/angular/B2uB8-9_Xbk|unordered-list-item|174061|AngularJS+-+losing+scope+when+using+ng-include|174062|174063|注意：我建议你重写你的问题。你的问题的答案是，是的，，但你的问题略有不同：|174064|174065|我可以从控制器访问子范围中的窗体吗？|blockquote|174066|174067|174068|答案很简单：no。|174069|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/ng/directive/form|1|2|https://stackoverflow.com/questions/11412410/angularjs-losing-scope-when-using-ng-include^0|H|4|0|0|5|E|0|H|5|N|9|X|A|1P|9|0|1|6|I|5|0|0|0|0|1N|1|0|0|1A|2|0|0|0|3|M|4|0|0|0|0|0|6|2|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|D|3|E|5|6|7|1K|8|@$A|1L|B|1M|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1N|8|@$A|1O|B|1P|F|J]|$A|1Q|B|1R|F|J]|$A|1S|B|1T|F|J]|$A|1U|B|1V|F|J]]|9|@]|C|$]]|$1|K|3|L|5|6|7|1W|8|@$A|1X|B|1Y|F|J]|$A|1Z|B|20|F|J]]|9|@]|C|$]]|$1|M|3|N|5|6|7|21|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|22|8|@]|9|@]|C|$]]|$1|P|3|Q|5|R|7|23|8|@]|9|@$A|24|B|25|1|26]]|C|$]]|$1|S|3|T|5|R|7|27|8|@]|9|@$A|28|B|29|1|2A]]|C|$]]|$1|U|3|-4|5|6|7|2B|8|@]|9|@]|C|$]]|$1|V|3|W|5|6|7|2C|8|@$A|2D|B|2E|F|G]|$A|2F|B|2G|F|G]]|9|@]|C|$]]|$1|X|3|-4|5|6|7|2H|8|@]|9|@]|C|$]]|$1|Y|3|Z|5|10|7|2I|8|@]|9|@]|C|$]]|$1|11|3|-4|5|6|7|2J|8|@]|9|@]|C|$]]|$1|12|3|-4|5|6|7|2K|8|@]|9|@]|C|$]]|$1|13|3|14|5|6|7|2L|8|@$A|2M|B|2N|F|G]]|9|@]|C|$]]|$1|15|3|-4|5|6|7|2O|8|@]|9|@]|C|$]]]|16|$17|$5|18|19|1A|C|$1B|1C]]|1D|$5|18|19|1A|C|$1B|Q]]|1E|$5|18|19|1A|C|$1B|1F]]]]

<p>Yes, you can access a form in the controller (as stated in the <a href="http://docs.angularjs.org/api/ng/directive/form" rel="nofollow noreferrer">docs</a>).</p>

<p>Except when your form is <strong>not</strong> defined in the controller scope and is defined in a child scope instead.</p>

<p>Basically, some angular directives, such as <code>ng-if</code>, <code>ng-repeat</code> or <code>ng-include</code>, will create an isolated child scope. So will any custom directives with a <code>scope: {}</code> property defined. Probably, your foundation components are also in your way.</p>

<p>I had the same problem when introducing a simple <code>ng-if</code> around the <code>&lt;form&gt;</code> tag.</p>

<p>See these for more info:</p>

<ul>
<li><p><a href="https://groups.google.com/forum/#!topic/angular/B2uB8-9_Xbk" rel="nofollow noreferrer">https://groups.google.com/forum/#!topic/angular/B2uB8-9_Xbk</a></p></li>
<li><p><a href="https://stackoverflow.com/questions/11412410/angularjs-losing-scope-when-using-ng-include">AngularJS - losing scope when using ng-include</a></p></li>
</ul>

<p><strong>Note:</strong> I suggest you re-write your question. The answer to your question is <strong>yes</strong> but your problem is slightly different: </p>

<blockquote>
  <p><em>Can I access a form in a child scope from the controller?</em></p>
</blockquote>

<p>To which the answer would simply be: <strong>no</strong>.</p>


blocks|key|2774285|text|您可以将窗体附加到父控制器中定义的某个对象。然后，您甚至可以从子作用域访问表单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2774286|父控制器|offset|length|style|BOLD|2774287|$scope.forms+=+{};|code-block|syntax|javascript|2774288|在子作用域中一些模板|2774289|<form+name="forms.form1">
</form>|2774290|问题是，表单不必在执行控制器中的代码时定义。所以你必须做这样的事情|2774291|$scope.$watch('forms.form1',+function(form)+{
++if(form)+{
++++//+your+code...
++}
});|2774292|entityMap^0|0|0|4|0|0|6|4|0|0|0|X|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|S|3|T|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|U|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|V|$]]

<p>You can attach the form to some object which is defined in a parent controller. Then you can reach your form even from a child scope.</p>

<p><strong>Parent controller</strong></p>

<pre><code>$scope.forms = {};
</code></pre>

<p><strong>Some template in a child scope</strong></p>

<pre><code>&lt;form name="forms.form1"&gt;
&lt;/form&gt;
</code></pre>

<p>Problem is that the form doesn't have to be defined in the moment when to code in the controller is executed. So you have to do something like this</p>

<pre><code>$scope.$watch('forms.form1', function(form) {
  if(form) {
    // your code...
  }
});
</code></pre>


blocks|key|172407|text|回答有点晚了，但有以下选项。这对我来说是有效的，但不确定这是不是正确的方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|172408|在我看来，我是这样做的：|172409|<form+name="formName">
++++<div+ng-init="setForm(formName);"></div>
</form>|code-block|syntax|javascript|172410|在控制器中：|172411|$scope.setForm+=+function+(form)+{
++++$scope.myForm+=+form;
}|172412|现在，在完成此操作后，我在控制器变量$scope.myForm中获得了表单|offset|length|style|CODE|172413|entityMap^0|0|0|0|0|0|I|D|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@$O|10|P|11|Q|R]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>Bit late for an answer but came with following option. It is working for me but not sure if it is the correct way or not.</p>

<p>In my view I'm doing this:</p>

<pre><code>&lt;form name="formName"&gt;
    &lt;div ng-init="setForm(formName);"&gt;&lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>And in the controller:</p>

<pre><code>$scope.setForm = function (form) {
    $scope.myForm = form;
}
</code></pre>

<p>Now after doing this I have got my form in my controller variable which is <code>$scope.myForm</code></p>


blocks|key|170340|text|如果要将表单传递给控制器进行验证，只需将其作为参数传递给处理提交的方法即可。使用表单名称，因此对于原始问题，应该是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|170341|<button+ng-click="submit(customerForm)">Save</button>|code-block|syntax|javascript|170342|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you want to pass the form to the controller for validation purposes you can simply pass it as an argument to the method handling the submission. Use the form name, so for the original question it would be something like:</p>

<pre class="lang-js prettyprint-override"><code>&lt;button ng-click="submit(customerForm)"&gt;Save&lt;/button&gt;
</code></pre>


blocks|key|2987265|text|为了能够访问控制器中的窗体，您必须将其添加到虚拟作用域对象中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2987266|像$scope.dummy+=+{}这样的东西|offset|length|style|CODE|2987267|对于您的情况，这意味着类似于：|2987268|<form+name="dummy.customerForm">|code-block|syntax|javascript|2987269|在您的控制器中，您可以通过以下方式访问表单：|2987270|$scope.dummy.customerForm|2987271|你将能够做像这样的事情|2987272|$scope.dummy.customerForm.$setPristine()|2987273|2987274|WIKI+LINK|2987275|2987276|有一个'.‘将确保原型继承在您的模型中发挥作用。因此，使用<input+type="text"+ng-model="someObj.prop1">而不是<input+type="text"+ng-model="prop1">|blockquote|2987277|2987278|如果你真的想/需要使用原语，有两种变通方法：|2987279|1.在子范围中使用$parent.parentScopeProperty。这将阻止子范围创建自己的属性。2.在父作用域上定义一个函数，并从子作用域调用它，将原始值向上传递给父作用域(并不总是可行的)|2987280|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular.js/wiki/Understanding-Scopes^0|0|1|H|0|0|0|0|0|0|0|0|0|9|0|0|0|T|18|24|10|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1H|8|@$D|1I|E|1J|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1K|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1L|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1N|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1O|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1P|8|@]|9|@]|A|$M|N]]|$1|W|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1R|8|@]|9|@$D|1S|E|1T|1|1U]]|A|$]]|$1|Z|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|10|3|11|5|12|7|1W|8|@$D|1X|E|1Y|F|G]|$D|1Z|E|20|F|G]]|9|@]|A|$]]|$1|13|3|-4|5|6|7|21|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|22|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|23|8|@]|9|@]|A|$]]|$1|18|3|-4|5|6|7|24|8|@]|9|@]|A|$]]]|19|$1A|$5|1B|1C|1D|A|$1E|1F]]]]

<p>To be able to access the form in your controller, you have to add it to a dummy scope object.</p>

<p>Something like <code>$scope.dummy = {}</code></p>

<p>For your situation this would mean something like:</p>

<pre><code>&lt;form name="dummy.customerForm"&gt;
</code></pre>

<p>In your controller you will be able to access the form by:</p>

<pre><code>$scope.dummy.customerForm
</code></pre>

<p>and you will be able to do stuff like</p>

<pre><code>$scope.dummy.customerForm.$setPristine()
</code></pre>

<hr>

<p><a href="https://github.com/angular/angular.js/wiki/Understanding-Scopes" rel="noreferrer">WIKI LINK</a></p>

<blockquote>
  <p>Having a '.' in your models will ensure that prototypal inheritance is
  in play. So, use <code>&lt;input type="text" ng-model="someObj.prop1"&gt;</code> rather
  than <code>&lt;input type="text" ng-model="prop1"&gt;</code></p>
  
  <p>If you really want/need to use a primitive, there are two workarounds:</p>
  
  <p>1.Use $parent.parentScopeProperty in the child scope. This will prevent
  the child scope from creating its own property. 2.Define a function on
  the parent scope, and call it from the child, passing the primitive
  value up to the parent (not always possible)</p>
</blockquote>


blocks|key|170373|text|您无法访问输入的原因是因为基础选项卡(或ng-repeat?)创建isolate+scope。解决此问题的一种方法是使用controller+as语法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|170374|<div+ng-controller="MyController+as+ctrl">


<div+ng-if="true">

<form+name="ctrl.myForm">
++++...inputs
++++Dirty?+{{ctrl.myForm.$dirty}}

++++<button+ng-click="ctrl.saveChanges()">Save</button>
</form>

</div>

</div>|code-block|syntax|javascript|170375|然后，您可以在代码中访问FormController，如下所示：|170376|function+MyController+()+{
++++var+vm+=+this;
++++vm.saveChanges+=+saveChanges;

++++function+saveChanges()+{

+++++++if(vm.myForm.$valid)+{+
++++++++++++//+Save+to+db+or+whatever.
++++++++++++vm.myForm.$setPristine();
+++++++}
}|170377|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular.js/wiki/Understanding-Scopes|1|https://docs.angularjs.org/api/ng/directive/ngController^0|K|9|X|D|0|1O|D|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]|$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

<p>The reason you can't access the input is because the Foundation tab (or <code>ng-repeat</code>?) creates an <a href="https://github.com/angular/angular.js/wiki/Understanding-Scopes" rel="nofollow noreferrer">isolate scope</a>. One way to address this is using the <a href="https://docs.angularjs.org/api/ng/directive/ngController" rel="nofollow noreferrer">controller as</a> syntax:</p>
<pre><code>&lt;div ng-controller=&quot;MyController as ctrl&quot;&gt;

&lt;!-- an example of a directive that would create an isolate scope --&gt;
&lt;div ng-if=&quot;true&quot;&gt;

&lt;form name=&quot;ctrl.myForm&quot;&gt;
    ...inputs
    Dirty? {{ctrl.myForm.$dirty}}

    &lt;button ng-click=&quot;ctrl.saveChanges()&quot;&gt;Save&lt;/button&gt;
&lt;/form&gt;

&lt;/div&gt;

&lt;/div&gt;
</code></pre>
<p>Then you can access the FormController in your code like:</p>
<pre><code>function MyController () {
    var vm = this;
    vm.saveChanges = saveChanges;

    function saveChanges() {

       if(vm.myForm.$valid) { 
            // Save to db or whatever.
            vm.myForm.$setPristine();
       }
}
</code></pre>


blocks|key|2987339|text|这个答案有点晚了，但我偶然发现了一个让一切变得更容易的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2987340|实际上，如果您正在使用controllerAs语法，则可以将表单名称直接分配给您的控制器，然后从"this“变量中引用它。下面是我在代码中是如何做到这一点的：|2987341|我通过ui-router配置了控制器(但您可以随心所欲地进行配置，甚至可以直接在HTML语言中使用类似于<div+ng-controller="someController+as+myCtrl">的内容)下面是它在ui-router配置中可能的样子：|offset|length|style|CODE|2987342|views:+{
++++++++++++"":+{
++++++++++++++++templateUrl:+"someTemplate.html",
++++++++++++++++controller:+"someController",
++++++++++++++++controllerAs:+"myCtrl"
++++++++++++}
+++++++}|code-block|syntax|javascript|2987343|然后在HTML中，您只需将表单名称设置为"controllerAs"."+name“，如下所示：|2987344|<ng-form+name="myCtrl.someForm">
++++
++++<input+name="firstName"+ng-model="myCtrl.user.firstName"+required>
</ng-form>|2987345|现在，在你的控制器中，你可以非常简单地做到这一点：|2987346|angular
.module("something")
.controller("someController",
++++[
+++++++"$scope",
++++++++function+($scope)+{
++++++++++++var+vm+=+this;
++++++++++++if(vm.someForm.$valid){
++++++++++++++//+do+something
++++++++++++}
++++}]);|2987347|entityMap^0|0|0|1G|1A|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@$F|11|G|12|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>This answer is a little late, but I stumbled upon a solution that makes everything a LOT easier.</p>

<p>You can actually assign the form name directly to your controller if you're using the controllerAs syntax and then reference it from your "this" variable.  Here's how I did it in my code:</p>

<p>I configured the controller via ui-router (but you can do it however you want, even in the HTML directly with something like <code>&lt;div ng-controller="someController as myCtrl"&gt;</code>)  This is what it might look like in a ui-router configuration:</p>

<pre><code>views: {
            "": {
                templateUrl: "someTemplate.html",
                controller: "someController",
                controllerAs: "myCtrl"
            }
       }
</code></pre>

<p>and then in the HTML, you just set the form name as the "controllerAs"."name" like so: </p>

<pre><code>&lt;ng-form name="myCtrl.someForm"&gt;
    &lt;!-- example form code here --&gt;
    &lt;input name="firstName" ng-model="myCtrl.user.firstName" required&gt;
&lt;/ng-form&gt;
</code></pre>

<p>now inside your controller you can very simply do this:</p>

<pre><code>angular
.module("something")
.controller("someController",
    [
       "$scope",
        function ($scope) {
            var vm = this;
            if(vm.someForm.$valid){
              // do something
            }
    }]);
</code></pre>


blocks|key|172487|text|你肯定不能在作用域bec中访问表单。它不会被创建。从html模板加载DOM的速度有点慢，就像控制器构造函数一样。解决方案是观察，直到DOM加载并定义了所有作用域！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|172488|在控制器中：|172489|$timeout(function(){
++++console.log('customerForm:',+$scope.customerForm);
++++//+everything+else+what+you+need
});|code-block|syntax|javascript|172490|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Definitely you can't access form in scope bec. it is not created. The DOM from html template is loaded little bit slowly like controller constructor.
the solution is to watch until DOM loaded and all the scope defined!</p>

<p>in controller:</p>

<pre><code>$timeout(function(){
    console.log('customerForm:', $scope.customerForm);
    // everything else what you need
});
</code></pre>


blocks|key|2774549|text|将ng-model="$ctrl.formName"属性添加到表单中，然后在控制器中，您可以通过this.formName将表单作为控制器内部的对象进行访问|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2774550|entityMap^0|1|P|1C|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>add <code>ng-model="$ctrl.formName"</code> attribute to your form, and then in the controller you can access the form as an object inside your controller by <code>this.formName</code></p>


<p>I'm currently using the following.</p>

<p><code>$scope.$$childHead.customerForm[firstName]</code>, so that:</p>

<pre><code>&lt;form name="customerForm"&gt;
  &lt;input type="text" name="firstName" 
         ng-model="data.customer.firstName" 
         tabindex="1"  
         ng-disabled="!data.editable" 
         validationcustomer /&gt;
&lt;/form&gt;
</code></pre>

<p>But this only works in Chrome. Now I tried the following:  </p>

<p><code>$scope.editCustomerForm[firstName]</code>, so that:</p>

<pre><code>&lt;form name="customerForm" ng-model="editCustomerForm"&gt;
  &lt;input type="text" name="firstName" 
         ng-model="data.customer.firstName" tabindex="1"  
         ng-disabled="!data.editable" 
         validationcustomer /&gt;
&lt;/form&gt;
</code></pre>

<p>Which doesn't work. Note my form is inside a Foundation Tab. How can I access <code>firstName</code>?</p>

<p><strong>EDIT</strong>: It looks like the <code>form</code> isn't added to the <code>scope</code> when it's inside a Foundation Tab. </p>

<p>Anyone has got a solution for this?</p>


Can I access a form in the controller?

我目前使用的是以下内容。$scope.$$childHead.customerForm[firstName]，因此：<form name="customerForm">  <input type="text" name="firstName"          ng-model="data.customer.first...

问我可以访问控制器中的表单吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以访问控制器中的表单吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我可以访问控制器中的表单吗？
EN