0

问题

我正在尝试从其父控制器范围访问 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
});

演示

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

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

4

1 回答 1

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

于 2015-02-03T23:43:24.653 回答