Question

问题

我试图通过它的父控制器范围访问AngularJS FormController实例（通过在name指令上设置form属性创建）。输出为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的返回值连接到一个字符串，该字符串也始终返回undefined;）将其更改为：

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实例

问题

混乱

实施例

演示

1 个答案: