我正在尝试从其父控制器作用域访问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
这里的问题是您的控制器是在模板之前初始化的,因此在您尝试使用它时,它仍然是未定义的。试试这个:
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;
这是工作正常的柱塞: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
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句