current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
3

I have the following code:

app.directive('mySample', function($compile) {
    return {
        //template:"<input type='text' ng=model='sampleData'/> {{sampleData}} <br/>"
        link: function(scope, element, atts, controller) {
            var markup = "<input type='text' ng=model='sampleData'/> {{sampleData}} <br/>";  
            angular.element(element).html($compile(markup)(scope));
            console.log($compile(markup)(scope));
        }
    };
});

And I would expect it to generate an input, some span that's coupled via the scope and a break. However I get this output:

[[object HTMLInputElement], [object HTMLSpanElement], [object HTMLBRElement]]

I also tried the template, in comment here, separately and then commenting out the link part. That generates the input and break elements but not the span that shows the coupled model input sampleData.

I have a non-working sample at http://jsfiddle.net/KvdM/nwbsT/ that demonstrates it.

share|improve this question
add comment

3 Answers

up vote 4 down vote accepted

Try this:

element.html(markup);
$compile(element.contents())(scope);
share|improve this answer
    
Renders out the input but not the {{sampleData}} working. –  XIII Jul 26 '13 at 14:05
    
How would I log the sampleData? –  XIII Jul 26 '13 at 14:12
2  
{{sampleData}} does not work because you wrote ng=model instead of ng-model :) –  CodeHater Jul 26 '13 at 14:17
add comment
up vote 4 down vote

Running the function returned by the $compile service gives you DOM elements rather than html. So you need to insert them into your page using append (or equivalent):

angular.element(element).append($compile(markup)(scope));
share|improve this answer
    
That shows already the input but doesn't make the {{sampleData}} work. –  XIII Jul 26 '13 at 14:03
add comment
up vote 2 down vote

Maybe the easiest way is to use a hard-coded template rather than a dynamic generated one

<div ng-app="myApp">
    <my-sample sample-data="'test'"></my-sample>
</div>

var app = angular.module('myApp', []);

app.directive('mySample', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            sampleData: '=sampleData'
        },
        template: "<input type='text'/> {{sampleData}} <br/>",
    };
});

FIDDLE

share|improve this answer
    
It renders out the input but not the {{sampleData}} getting updated. It keeps on showing test. –  XIII Jul 26 '13 at 14:06
    
That is the data passed in in HTML. –  zsong Jul 26 '13 at 14:22
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.