dynamic template in directive

[Hao Deng]

Hello :
How can I have a dynamic template in a directive?
I would like to have a directive, whose template can be either
'<input> ' or '<select/> depends on instance attribute.
I tried with link : (iElement .. ) -> iElement.replaceWith( $(
'<select ng-model=foo>')) but it will not work because at link stage,
compilation has finished, so ng-model will have no effect.


Thanks in advance.

[Hao Deng]

Repost my question with [AngularJS] in subject.

[Witold Szczerba]

Hi,
you can simply compile whatever you want when processing directives. I won't give you specific example as I am writing from my mobile, but take a look at $compile service.

Let us know if you have hard time figuring it out.

Regards,
Witold Szczerba

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.

[Hao Deng]

I still have trouble.

Here is my html in jade format.
I have 2 test directive, and I would like the first generate a <select> 

while the second generate a <input> 

------------------------------------
doctype 5
html(ng-app='app1')
    head    
        script(src='/lib/angular-1.0.1.js')
        script(src='app1.js')
    body        
        test(ng-model='m1', options='[1,2,3]')
        test(ng-model='m2')
        p m1: {{m1}}
        p m2: {{m2}}
--------------------------

And here is module in coffeescript & js 

---------------

angular.module('app1', [])

.directive 'test', ()->

restrict    : 'E'

template : """ <input> """

replace : true 

-------------------------

(function() {

  angular.module('app1', []).directive('test', function() {

    return {

      restrict: 'E',

      template: " <input> ",

      replace: true

    };

  });

}).call(this);

------------

Inside 'test's function, when returning template: 'foo', there is no instance element or attribute, so there is no way to dynamically return a template. 

[Witold Szczerba]

Forget about directive:template property and go ahead with link
function. In link function you can ask for a $compile service, use it
to generate a template function and resolve it against current scope.

[Hao Deng]

Can you have a few line of code sample? 

what do you mean by generate a template function ? 

what do you mean by resolve? 

[Witold Szczerba]

Here it is:
http://jsfiddle.net/witoldsz/BFpqF/3/

angular.module('app1', []) //
.directive('test', function($compile) {
return {
restrict: 'E',
compile: function(element, attrs) {
var input = angular.element('<input type=text ng-model=myModel>');
return function(scope, element, attrs) {
element.append(input);
var templateFn = $compile(input);
templateFn(scope);
}
}
}
});

--
Witold Szczerba

[nme...@gmail.com]

Can you use ngSwitch to select between the 2?

[Hao Deng]

Great thanks Witold, you are so nice. 

[Hao Deng]

Sounds interesting, will try later. 

--

[Lou Campopiano]

Hi, i am looking to do something similar to this. In my directive i want to pass the path of a templeteUrl from a json file. Can you tell me how i could accomplish this? I am a newbie to angularjs

Thanks in advance

[Witold Szczerba]

Hi,
Check the thread about layouts. I have provided an example of such a directive today.

Regards,
Witold Szczerba
---
Sent from my mobile phone.

On Dec 20, 2012 12:56 AM, "Lou Campopiano" <camp...@gmail.com> wrote:

Hi, i am looking to do something similar to this. In my directive i want to pass the path of a templeteUrl from a json file.  Can you tell me how i could accomplish this? I am a newbie to angularjs

Thanks in advance

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular?hl=en-US.

[Witold Szczerba]

I mean kind of such a directive, not exactly like this, but it also replaces the template url based on a variable property (by encapsulating ng-include).
You can also use plain ng-include and set the property in controller.

Regards,
Witold Szczerba
---
Sent from my mobile phone.

[Lou Campopiano]

Can you provide the link to that thread?