{"id":1796,"date":"2022-08-30T15:19:31","date_gmt":"2022-08-30T15:19:31","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/12\/02\/angularjs-error-no-controller-ngmodel-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:19:31","modified_gmt":"2022-08-30T15:19:31","slug":"angularjs-error-no-controller-ngmodel-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/angularjs-error-no-controller-ngmodel-collection-of-common-programming-errors\/","title":{"rendered":"angularjs Error: No controller: ngModel-Collection of common programming errors"},"content":{"rendered":"

I’ve been working with AngularJS for a few days now, and I’m declaring two directives which work if I don’t require anything. But I need the ngModel<\/code> to use the $setViewValue<\/code> method.<\/p>\n

My directives look like this :<\/p>\n

\n    \n\n<\/code><\/pre>\n
The directives are defined like :<\/p>\n
var Application = Application || {};\n\n;(function(window, document, undefined) {\n\n    \"use strict\";\n\n    var CorinaJSDialog = {};\n\n    Application.CorinaJSDialog = angular.module(\"CorinaJSDialog\", [\"ngSanitize\"]);\n\n    Application.CorinaJSDialog.constant(\"CorinaJSAPI\", {\n\n        document : {\n            load : \"\/corina\/api\/loaddocument\",\n            save : \"\/corina\/api\/savedocument\"\n        }\n    });    \n\n    Application.CorinaJSDialog.directive(\"corina\", [\"$timeout\", function($timeout){\n\n        var object = {\n\n            restrict : \"E\",\n            require : \"ngModel\",\n\n            transclude : true,\n            replace : true,\n            priority : 1,\n            templateUrl : \"corina.html\",\n            controller : function($scope) {},\n            link : function(scope, element, attrs, controller) { console.log(controller); }\n        };\n\n        return object;\n    }]);\n\n    Application.CorinaJSDialog.directive(\"properties\", [\"$timeout\", function($timeout){\n\n        var object = {\n\n            restrict : \"E\",\n            require : \"?corina\",\n            transclude : true,\n            replace : true,\n            priority : 2,\n            terminal : true,\n            templateUrl : \"properties.html\",\n            controller : function($scope) {},\n            link : function(scope, element, attrs, controller) {\n\n                var loadXeditable = function() {\n\n                    $(element).editable({\n                        mode: \"inline\",\n                        display: function(value) {\n\n                            controller.$setViewValue(value);\n\n                            scope.$apply();\n\n                            $(this).html(value);\n                        }\n                    });\n                };\n\n                $timeout(function() {\n                    loadXeditable();\n                }, 10);\n\n            }\n        };\n\n        return object;\n    }]);\n\n})(window, document);\n<\/code><\/pre>\n
And the templates that are loaded :<\/p>\n
corina.html<\/code> :<\/p>\n
\n    \n\n<\/code><\/pre>\n
properties.html<\/code> :<\/p>\n
\n    \n        {{property.Name}}\n\n        \n            \n                \n            \n        \n    \n\n<\/code><\/pre>\n
Each time I run the above I get this error :<\/p>\n
Error: No controller: ngModel\nat Error ()\nat i (https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.1.3\/angular.min.js:41:165)\nat l (https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.1.3\/angular.min.js:43:252)\nat https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.1.3\/angular.min.js:47:425\nat https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.1.3\/angular.min.js:96:330\nat h (https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.1.3\/angular.min.js:78:207)\nat https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.1.3\/angular.min.js:78:440\nat Object.e.$eval (https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.1.3\/angular.min.js:89:272)\nat Object.e.$digest (https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.1.3\/angular.min.js:87:124)\nat Object.e.$apply (https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.1.3\/angular.min.js:89:431)  angular.min.js:62\n<\/code><\/pre>\n
Also, if I require the directive like ^mydir<\/code>, I get the same error, or simply like mydir<\/code>. Only if I use ?mydir<\/code> I get no error, but then I cannot use ngModule<\/code> directive. I would appreciate some input on what is it that I’m doing wrong.<\/p>\n
    \n
  1. \n
    As I interpret it, you have two element directives, corina<\/code> and properties<\/code>, where properties<\/code> wants the controller from corina<\/code>. That will always fail because because they need to be on the same element for require: 'corina'<\/code> to work. But I see now in your template that properties<\/code> are inside of corina<\/code>, so what you should do in properties<\/code> is this: require : \"^?corina\"<\/code> instead. That tells Angular to look for the corina controller in parent elements as well.<\/p>\n
    Requiring ngModel<\/code> in corina<\/code> won’t work though, since ng-model<\/code> isn’t set on the corina element. Your ng-model<\/code> is set on an element inside the corina<\/code> replacement template, so there’s no way for the corina<\/code> directive to get that ngModelController. You can only ask for controllers from the same element or from parent elements, not from child elements. If you really need ngModelController<\/code> you should add your own directive on the same element that has ng-model<\/code> and require ngModelController<\/code> there. That directive can require the corina<\/code> controller (since the corina<\/code> controller is on a parent element) and pass the ngModelController<\/code> to the corina<\/code> controller.<\/p>\n
    But I’m not really sure why you want to use ng-model<\/code> here in the first place? You’ve placed it on an anchor element which won’t do anything. What is the effect that your after of having ng-model<\/code> on an anchor element?<\/p>\n<\/li>\n<\/ol>\n
    Originally posted 2013-12-02 01:34:29. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    I’ve been working with AngularJS for a few days now, and I’m declaring two directives which work if I don’t require anything. But I need the ngModel to use the $setViewValue method. My directives look like this : The directives are defined like : var Application = Application || {}; ;(function(window, document, undefined) { “use […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1796","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1796"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1796\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}