AngularJS:错误:无控制器:表单 [英] AngularJS: Error: No controller: form

问题描述

HTML:

<ng-form name="myform"><gtux-el></gtux-el></ng-form>

JS

var app = angular.module('my-app', [], function () {})app.controller('AppController', function ($scope) {})app.directive('gtInputMsg', ['$compile', '$interpolate', '$log', function($compile, $interpolate, $log) {函数链接($scope, element, attrs, ctrls) {var modelCtrl = ctrls[0], formCtrl = ctrls[1], msgCtrl = ctrls[2];element.on('点击', function() {console.log('gt-input-msg:click', element)});};返回 {要求 : ['ngModel', '^form', 'gtInputMsg'],链接:链接};}]);app.directive('gtuxTextfield', ['$compile', '$timeout', '$log', function($compile, $timeout, $log) {返回 {限制:'E'，模板:'<input type="text" name="field" gt-input-msg ng-model="fieldvalue"/>',替换:真};}]);app.directive('gtuxEl', ['$compile', '$timeout', '$log', function($compile, $timeout, $log) {功能链接($scope，$element，attrs，ctrl){//这里使用compile是因为在我的用例中，根据一些选项值使用了不同的元素.服务提供基于密钥使用的模板var $cr = $compile('<gtux-textfield></gtux-textfield>')($scope);$($cr).appendTo($element);}返回 {限制:'E'，链接:链接，嵌入:真};}]);

错误

错误:无控制器:表单出错时(<匿名>)在 getControllers (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:4278:19)在 http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:4284:24

演示:小提琴

据我所知，在层次结构的顶部有一个 ng-form 元素，它应该提供 from 控制器到 gtInputMsg 指令.

如何纠正这种情况?

解决方案

您正在编译 <gtux-textfield> 元素，但它没有在 DOM 中的表单下，因为您没有附加它.试试:

var $cr = $('<gtux-textfield></gtux-textfield>').appendTo($element);$compile($cr)($scope);

在您的 gtuxEl 链接函数中.

演示:小提琴

HTML:

<div ng-app="my-app" ng-controller="AppController">
    <ng-form name="myform">
        <gtux-el></gtux-el>
    </ng-form>
</div>

JS

var app = angular.module('my-app', [], function () {
})

app.controller('AppController', function ($scope) {
})

app.directive('gtInputMsg', ['$compile', '$interpolate', '$log', function($compile, $interpolate, $log) {
    function link($scope, element, attrs, ctrls) {
        var modelCtrl = ctrls[0], formCtrl = ctrls[1], msgCtrl = ctrls[2];

        element.on('click', function() {
            console.log('gt-input-msg:click', element)
        });
    };

    return {
        require : ['ngModel', '^form', 'gtInputMsg'],
        link : link
    };
}]);

app.directive('gtuxTextfield', ['$compile', '$timeout', '$log', function($compile, $timeout, $log) {
    return {
        restrict : 'E',
        template : '<input type="text" name="field" gt-input-msg ng-model="fieldvalue" />',
        replace : true
    };
}]);

app.directive('gtuxEl', ['$compile', '$timeout', '$log', function($compile, $timeout, $log) {
    function link($scope, $element, attrs, ctrl) {
        //here compile is used because in my use case different elements are used based on some option values. A service provides the template to be used based on a key
        var $cr = $compile('<gtux-textfield></gtux-textfield>')($scope);
        $($cr).appendTo($element);
    }

    return {
        restrict : 'E',
        link : link,
        transclude : true
    };
}]);

Error

Error: No controller: form
    at Error (<anonymous>)
    at getControllers (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:4278:19)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:4284:24

Demo: Fiddle

As far I can see there is a ng-form element at the top of the hierarchy which should provide the from controller to the gtInputMsg directive.

How can this be rectified?

解决方案

You're compiling the <gtux-textfield> element without it being under the form in the DOM as you haven't appended it yet. Try:

var $cr = $('<gtux-textfield></gtux-textfield>').appendTo($element);
$compile($cr)($scope);

In your gtuxEl link function.

Demo: Fiddle

这篇关于AngularJS:错误:无控制器:表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！