Below is a directive I use for dynamically loaded html with angular
content. I haven't used this inside another directive, but it might get you
going:
<div dynamic="html_with_angular_here"></div>
App.directive('dynamic', function ($compile) {
return {
restrict: 'A',
replace: true,
scope: { dynamic: '=dynamic'},
link: function postLink(scope, element, attrs) {
scope.$watch( 'dynamic' , function(html){
element.html(html);
$compile(element.contents())(scope);
});
}
};
});
On Sunday, January 4, 2015 1:16:41 AM UTC-5, Akshath Kumar wrote:
>
> Hi,
>
> Could any one please help me to sort out this issue.
>
>
>
> Thanks & Regards,
>
>
>
> Akshath kumar M
>
> Mob : +919567102617
>
>
>
>
>
> baabte℠ System Technologies Pvt Ltd.
>
> An ISO 9001 : 2008 certified company
>
> Office: + 91495-2295550 | Mob : +919539906339
>
> www.baabte.com <http://www.baabte.com%20/> | www.baabtra.com |
> www.massbaab.com <http://www.baabtra.com/>
>
> On Sat, Jan 3, 2015 at 11:26 AM, Akshath Kumar <[email protected]
> <javascript:>> wrote:
>
>> Hi,
>>
>> I Have one scenario where i am adding directives dynamically from another
>> directive of an html element.The problem is that the dynamically loaded
>> directive couldn't get compiled.
>>
>> 1.my html element look like,
>>
>> <div class="form-control contentEditDiv" fg-custom-attributes
>> fg-field-input="" fg-placeholder="field.schema.placeholder"
>> ng-model="form.data[field.schema.name]" title="{{ field.schema.tooltip
>> }}" tabindex="{{ tabIndex }}"
>> ng-required="field.schema.validation.required" ng-minlength="{{
>> field.schema.validation.minlength }}" ng-maxlength="{{
>> field.schema.validation.maxlength }}" ng-pattern="{{
>> field.schema.validation.pattern }}"></div></div>');
>>
>> 2. directive code to add dynamic directives,
>>
>> fg.directive('fgCustomAttributes', function($compile) {
>> /*
>> This Directive which will add custom attributes at the time of
>> rendering the template.
>> */
>>
>> return {
>> scope:true,
>> link: function($scope, $element, $attrs) {
>> if($scope.form.schema.fields.length>0){
>> for(var n=0;n<$scope.form.schema.fields.length;n++){
>> if($scope.form.schema.fields[n].customlist!== undefined){
>> optionsOfDirective= $scope.form.schema.fields[n].customlist;
>> for (var i = 0; i < optionsOfDirective.length; i++) {
>> var text = optionsOfDirective[i].text;
>> var value = optionsOfDirective[i].value;
>> $element.attr(value, text); //adding directive
>> dynamically from an object
>> /* here the dynamically added directive
>> couldn't get compiled. */
>> }
>>
>> }
>> }
>> }
>>
>> }
>>
>> };
>> });
>>
>> 3. At last the element look like,
>>
>> <div class="form-control contentEditDiv ng-scope ng-pristine ng-valid
>> ng-valid-required" fg-custom-attributes="" fg-field-input=""
>> fg-placeholder="field.schema.placeholder" ng-model="message" title="Content
>> to be posted" tabindex="auto"
>> ng-required="field.schema.validation.required" ng-minlength=""
>> ng-maxlength="" ng-pattern="/" contenteditable="true"
>> ng-class="{focused: hasFocus}" no-line-breaks="true" strip-br="false"
>> select-non-editabl="true" id="contentEditDiv" placeholder="Content goes
>> here"></div>
>>
>> here the yellow background text is indicating the newly added directives
>> but which are no getting compiled.
>>
>> Please help me to sort out this issue..
>>
>>
>> Regards,
>>
>> Akshath
>>
>> --
>> 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/2fXeMtKbooM/unsubscribe.
>> To unsubscribe from this group and all its topics, send an email to
>> [email protected] <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> Visit this group at http://groups.google.com/group/angular.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
