Angularjs 为什么我的角度控制器不´；找不到我的表单-$scope.form未定义

我试图理解为什么我的表单在主控制器内无法识别，如果我在外部放置另一个控制器，我的表单将无法识别

config.js

MyController.js

testing.html

然后将ng控制器添加到表单中，如下所示

function ChildController($scope,$timeout) {
    $scope.test = {
        name: 'das'
    };

    $scope.sendTest = function () {
        console.log($scope.form.$valid);
        console.log($scope.form.testNumber.$valid);
        console.log($scope.form.testName.$valid);
    };
};

function MyController($scope) {  //do other stuff ...};


angular
    .module('Myapp')
    .controller('ChildController', ["$scope", ChildController])
    .controller('MyController', ["$scope"]);

<form name="form" novalidate ng-controller='ChildController'>

表单已正确重新确认并正常工作

谁能解释一下我在这里遗漏了什么，我想更好地理解，我是个新手

谢谢你的帮助

致以最良好的祝愿。

---

Jolynice

从Brad Barber的评论中可以看出：

表单是在子作用域而不是控制器上创建的 范围

像他建议的那样，一个好的解决方案是将

bindToController

和

controllerAs

语法添加到路由对象：

function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
    $urlRouterProvider.otherwise("/index/main");
    $stateProvider
        .state('testing', {
            url: "/testing",
            controller: 'MyController',
            controllerAs: 'viewCtrl',
            bindToController: 'true',
            templateUrl: "testing.html"
        });
}

现在可以将表单的名称绑定为

viewCtrl.form

：

<form name="viewCtrl.form" novalidate>
    <p>
        <label>Number: </label>
        <input type="number" min="0" max="10" ng-model="viewCtrl.test.number" name="testNumber" required />
    </p>
    <p>
        <label>Name: </label>
        <input type="text" ng-model="viewCtrl.test.name" name="testName" required />
    </p>
    <button ng-click="viewCtrl.sendTest()">Submit</button>
</form> 

---

检查表单是否位于任何具有ng if条件的div内 像

.

---

如果是这样，表单将返回undefined，因为为包含ng If条件的DOM创建了新的作用域。如果这不会创建新的作用域，则使用ng show而不是ng。我是从

那里得到这个解决方案的。你把

ng controller='MyController'

放在任何地方了吗？看起来它是通过路线绑定的。你好，科莫和肖恩。我没有ng controller='MyController'，声明只在路由控制器'MyController'中，表单是在子作用域上创建的（不是您控制器的作用域）。最简单的修复方法是使用“Controller As”语法，但另一种方法是在您的scope上创建一个空vm-

$scope.forms={}

然后引用您的标记中的一个子项：

ng form=“forms.form”

首先，让我对我收到的所有帮助表示感谢，这是我的第一篇帖子，我不希望这么快就能得到答案。谢谢大家。嗨，肖恩，谢谢你们的回复，但我想我错过了什么，我已经按照你们说的做了，但什么也没发生。没有错误。。娜达。。哈哈，若并没有太多的问题，你们能创建一个例子吗？我会尝试，我从来并没有这样做过ui路由器在它之前。给我一些时间。我对代码做了一些更改，因为有一些语法问题。这应该与密码笔相对应。谢谢肖恩，工作顺利，现在我明白了。五颗星；）

<form name="form" novalidate ng-controller='ChildController'>

function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
    $urlRouterProvider.otherwise("/index/main");
    $stateProvider
        .state('testing', {
            url: "/testing",
            controller: 'MyController',
            controllerAs: 'viewCtrl',
            bindToController: 'true',
            templateUrl: "testing.html"
        });
}

<form name="viewCtrl.form" novalidate>
    <p>
        <label>Number: </label>
        <input type="number" min="0" max="10" ng-model="viewCtrl.test.number" name="testNumber" required />
    </p>
    <p>
        <label>Name: </label>
        <input type="text" ng-model="viewCtrl.test.name" name="testName" required />
    </p>
    <button ng-click="viewCtrl.sendTest()">Submit</button>
</form> 

function MyController($scope) {     
  // Adding variables functions available to ctrl scope
  // same as vm = this;
  angular.extend(this, {
    test: {name: 'das'},
    sendTest: function() {
       console.log(this.form.$valid);
       console.log(this.form.testNumber.$valid);
       console.log(this.form.testName.$valid);
    }
  });

};

angular
    .module('Myapp')
    .controller('MyController', ["$scope", MyController]);

<div ng-if="condition">
  <form name="viewCtrl.form">
   .
  </form>
</div>