required ngModel is null in directive

418 views
Skip to first unread message

Dima Yashin

unread,
Nov 3, 2015, 10:17:42 AM11/3/15
to AngularJS
Hi, all!
I have problem with passing model into ng-summernote plugin (https://github.com/summernote/angular-summernote)

Here is my component:

<div id="summernote"
config="ctrl.summernoteOptions"
ng-model="ctrl.emailTpl"
summernote>
</div>

ctrl here is controllerAs
emailTpl - string variable that provide default text

and such component code 

.directive('summernote', [function() {
'use strict';

return {
restrict: 'EA',
transclude: 'element',
replace: true,
require: ['summernote', '^?ngModel'],
controller: 'SummernoteController',
scope: {
summernoteConfig: '=config',
editable: '=',
editor: '=',
init: '&onInit',
enter: '&onEnter',
focus: '&onFocus',
blur: '&onBlur',
paste: '&onPaste',
keyup: '&onKeyup',
keydown: '&onKeydown',
change: '&onChange',
toolbarClick: '&onToolbarClick',
imageUpload: '&onImageUpload',
ngModel: '='
},
template: '<div class="summernote"></div>',
link: function(scope, element, attrs, ctrls, transclude) {
var summernoteController = ctrls[0],
ngModel = ctrls[1];

console.log(scope.ngModel);

transclude(scope, function(clone, scope) {
// to prevent binding to angular scope (It require `tranclude: 'element'`)
element.append(clone.html());
});

summernoteController.activate(scope, element, ngModel);
}
};

As you can see directives requires ngModel and angular usually creates ngModelController in such case, but in my case ngModel is null.

I add ngModel into scope object to be sure that correct variable passing into directive and it's true.

Sander Elias

unread,
Nov 3, 2015, 12:15:56 PM11/3/15
to AngularJS
the ^ in your require will search for an ngModel on the parent. Did you try without?

Dima Yashin

unread,
Nov 4, 2015, 7:35:25 AM11/4/15
to ang...@googlegroups.com
You are so true! Thanks. Summernote is not my component, so I need to put ng-model on parent element.

2015-11-03 19:15 GMT+02:00 Sander Elias <sande...@gmail.com>:
the ^ in your require will search for an ngModel on the parent. Did you try without?

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/nncrz7XOMCE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages