Почему мой угловой контроллер не находит мою форму - $ scope.form undefined

Question

Я пытаюсь понять, почему моя форма не распознается внутри maincontroller, если я нахожу другой контроллер снаружи, моя форма распознается.

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 и я переместить код внутри как этот

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

и добавьте нг -controller к форме, подобной этой форме

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

форма правильная и правильная.

Может кто-нибудь объяснить, чего я здесь не вижу, я хотел бы лучше понять, я новичок.

Спасибо вам за помощь.

С уважением. Jolynice

Answer 1

Как видно из комментариев Брэда Барбера:

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

Теперь вы можете свяжите имя формы как 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:

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: