angularjs - 为什么我的 Angular Controller 找不到我的表单 - $scope.form undefined

Question

我试图理解为什么我的表单在主 Controller 内部无法识别，如果我将另一个 Controller 放在外面，我的表单就会被识别。

config.js

var myApp = angular.module('Myapp', ['ui.router','oc.lazyLoad','ui.bootstrap','kendo.directives','ngStorage',]);

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

angular
    .module('Myapp')
    .config(config)
    .run(function($rootScope, $state) {
        $rootScope.$state = $state;
    }); 

MyController.js

function MyController($scope) {     
  //do something
  $scope.test = {name: 'das'};

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

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

testing.html

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

像这样有这个错误

TypeError: Cannot read property '$valid' of undefined

但是如果我在 MyController.js 中创建另一个 Controller ，然后像这样将代码移动到里面

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"]);

并将 ng-controller 添加到表单中，如下所示

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

表单已正确识别并正常工作。

谁能解释一下我在这里缺少什么，我想更好地理解，我是新手。

感谢您的帮助。

最诚挚的问候。 乔利尼斯

Answer 1

如 Brad Barber 的评论所示:

The form is being created on the child scope and not the controller scope.

像他建议的一个好的解决方案是将 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"
        });
}

现在您可以将表单名称绑定(bind)为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> 

然后您可以使用 this 在 Controller 中对其进行注释:

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]);

Here is a codepen that I hacked together for you: