Geek Answers Handbook

A third-party directive inside another directive when using the syntax "controller as ..."

This is a piece of code that recreates my problem:

HTML:

... <div ng-controller="worker as workerCtrl"> <my-directive label="label" controllerAs="workerCtrl" function="fileUpload(e, this.options)"></my-directive> </div>

controller:

 ... function fileUpload(file, options){...} ...

directive:

 function myDirective($compile) { var directive = { restrict: 'E', link: link }; return directive; function link(scope, element, attrs) { var htmlText = '<lx-file-input ' + 'change="'+attrs.controllerAs+'.'+attrs.uploadFunction+'" ' + 'label="'+attrs.label+'"></lx-file-input>'; element.replaceWith($compile(htmlText)(scope)); } }

It should be: ('lx-file-input' is a third-party directive ...)

 <lx-file-input change="workerCtrl.fileUpload(e, this.options)" label="someLabel"</lx-file-input>

The problem is that Angular compilation and linking time is disabled, and the templates are left with an HTML string instead of a compiled function. I know this will work if I install the controller inside the directive, but I want it to use the same function in the same "workerCtrl" area from HTML.

+5
source share
2 answers

First, you can try to pass the function from the outside, like on-close in the official Angular guide .

 <div ng-controller="Controller"> {{message}} <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog(message)"> Check out the contents, {{name}}! </my-dialog> </div>

But I do not understand why you should not create a bridge function in the scope of your directive that calls the desired function. I would prefer that.

I recently had almost the same answer you just posted. You can find other helpful posts there.

+1
source

More articles:


All Articles