Question

我理解each form directive creates an instance of FormController可以在表单名称下发布到当前作用域。基于我对Angular控制器的理解（即它们'附加'到定义它们的DOM元素），我希望myForm FormController在<form>元素之外不可见，就像ctl MyFormController在<div>元素之外不可见。

然而myForm对象在<form>之外可见，而ctl对象（正如预期）在<div>之外不可见

<html>
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js'></script>
  </head>
  <body ng-app='theApp'>
    <div ng-controller='MyFormController as ctl' >
      <form name='myForm' novalidate>
        Name:<input type='text' ng-model='ctl.name'/>
      </form>
      myForm is visible: {{myForm}}
    </div>
    ctl is not visible: {{ctl}}
    <script type='text/javascript'>
     var theApp = angular.module('theApp', []);
     theApp.controller('MyFormController', [function() {}]);
    </script>
  </body>
</html>

Answer 1

让我再回答一下。我将在html中添加评论：

<html>
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js'></script>
  </head>
  <body ng-app='theApp'>
<!--Ok, app initialized, $rootScope is initialized -->
    <div ng-controller='MyFormController as ctl' >
<!--New controller - let's give it a child scope: $myFormScope = $rootScope.$new() -->
<!--Set ctl on $myFormScope, access it via $myFormScope.ctl -->
      <form name='myForm' novalidate>
<!--Create myFormController, attach it to $myFormScope (the current scope), access it via $myFormScope.myForm -->
        Name:<input type='text' ng-model='ctl.name'/>
      </form>
      myForm is visible: {{myForm}}
<!--it's visible because we're essentially accessing $myFormScope.myForm -->
    </div>
    ctl is not visible: {{ctl}}
<!--it's NOT visible because we're accessing $rootScope.ctl but ctl is not on $rootScope -->
    <script type='text/javascript'>
     var theApp = angular.module('theApp', []);
     theApp.controller('MyFormController', [function() {}]);
    </script>
  </body>
</html>

我希望它更有意义

Answer 2

form指令不会创建新作用域，并且表单控制器将在name属性的值下发布到当前作用域： https://docs.angularjs.org/api/ng/directive/form

相反，ng-controller指令总是创建一个新范围。这就是为什么表单控制器在＆lt; form＆gt;之外可见的原因。元素并且在MyFormController范围内（因为它在其范围内发布），而MyFormController在＆lt; div＆gt;之外是不可见的。元件。

另一个需要注意的是，除了在当前作用域上创建的表单控制器之外，还有在全局窗口对象上创建的表单DOM对象（表单控制器将表单DOM对象隐藏为它们都使用表单元素的name属性的值作为其名称。）

以下代码演示了上述内容：

<html>
  <head>
    <meta charset='utf-8'/>
    <script src='angular.js'</script>
  </head>
  <body>
    <script type='text/javascript'>
     Object.prototype.asdf2343_getName = function() { 
       var funcNameRegex = /function (.{1,})\(/;
       var results = (funcNameRegex).exec((this).constructor.toString());
       return (results && results.length > 1) ? results[1] : "";
     };
    </script>
    <div ng-app = 'theApp'>
      <div ng-controller='theController as ctl'>
        {{ctl.showScopes()}}
        <form name='form1' novalidate>
        </form>
        {{ctl.log(form1)}}
      </div>
    </div>
    <script type='text/javascript'>
     angular.module('theApp', [])
            .controller('theController', ['$rootScope', '$scope', function($rootScope, $scope){
              this.log = function(x) {
                console.log('x is the form1 on the window object? '+(x===window.form1));
                console.log('the type of window.form1 is: '+window.form1.asdf2343_getName());
                console.log('x is the form1 object in scope? '+(x===$scope.form1));
                console.log('the type of $scope.form1 is: '+$scope.form1.asdf2343_getName());
              };
              this.showScopes = function () {
                for (p in $rootScope) {
                  if ($rootScope[p]===$scope)
                    console.log('$scope found in $rootScope as property named: ['+p+']');
                }
              };
            }]);
    </script>
  </body>
</html>

FormController的可见性

2 个答案: