无法从父范围定位 FormController 实例

Question

问题

我正在尝试从其父控制器范围访问 AngularJS FormController 实例（通过在 form 指令上设置 name 属性创建）。输出为 undefined.

混乱

但是当我将它登录到控制台时，我可以在 $scope 上看到控制器对象作为属性。我还可以使用插值指令从模板本身访问对象。

例子

标记如下：

<body ng-controller="FooCtrl">
    <form name="FooForm" novalidate>
        <input name="bar" required>
    </form>
</body>

JavaScript 看起来像：

myAngularApp.controller('FooCtrl', function ($scope) {
    console.log($scope.FooForm); // undefined
    console.dir($scope); // has FooForm peek-a-booing in there
});

演示

这里是完整的代码：http://plnkr.co/edit/EE7pdBF32B5XRbjZuy8R?p=preview

我做错了什么？我正在尝试遵循这些文档：https://docs.angularjs.org/api/ng/directive/form

Answer 1

这里的问题是你的控制器在你的模板之前被初始化，所以当你试图使用它时，它仍然是未定义的。试试这个：

myApp.controller('MainCtrl', function ($scope) {
    $scope.$watch('NewForm', function () {
        var outputArea = document.getElementById('output-area');
        outputArea.innerHTML = "The FormController instance is: " + $scope.NewForm;
    });
});

另请注意使用：

outputArea.innerHTML = "The FormController instance is: " + console.dir(newVal);

没有多大意义，您试图将 console.dir 的 return 值连接到一个字符串，该字符串也总是 return 未定义 ;) 将其更改为:

outputArea.innerHTML = "The FormController instance is: " + $scope.NewForm;

这是一个有效的 Plunker：http://plnkr.co/edit/yfVP8hD6saWV2tIok2ER?p=preview

评论后编辑：

如果您希望在表单在您的范围内可用时立即收到通知并且您不想使用 $watch，您可以通过向您的表单元素添加一个自定义指令来触发一个事件：

<form name="NewForm" novalidate formready>

自定义 'formready' 指令：

.directive('formready', function(){
    return {
        restrict: 'A',
        compile: function () {
            return {
                post: function(scope) {
                    scope.$emit('formready');
                }
            }
        }
    };
});

现在在你的控制器中你可以做：

$scope.$on('formready', function (event) {
    console.log($scope.NewForm); // Available now
});

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/KG7LEB6EEkBkdONkL9LA?p=preview

无法从父范围定位 FormController 实例

Unable to locate FormController instance from parent scope

angularjs

angularjs-ng-form

问题

混乱

例子

演示