Error when calling a directive in AngularJS

Question

I had the following directive:

app.directive('markdown', function () {
    var converter = new Showdown.converter();
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var htmlText = converter.makeHtml(attrs.abc);
            element.html(htmlText);
        }
    }
});

Which was not working correctly so the following was proposed.

app.directive('markdown', function () {
        var converter = new Showdown.converter();
        return {
            restrict: 'E',
        scope: {
                    input: '=input'
                },
            link: function (scope, element, attrs) {
               scope.$watch(input,function(newvalue){
                 element.html(newvalue);
               });

            }
        }
    });

and I am calling it like this:

<markdown input="{{ q.qv.text }}"></markdown>

But it's giving me an error:

Error: [$parse:syntax] http://errors.angularjs.org/1.2.2/$parse/syntax?p0=q.qv.text&p1=is%20unexpe…ting%20%5B%3A%5D&p2=4&p3=%7B%7B%20q.qv.text%20%7D%7D&p4=q.qv.text%20%7D%7D
    at Error (<anonymous>)
    at http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:6:449
    at Wa.throwError (http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:152:467)
    at Wa.consume (http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:153:454)
    at Wa.object (http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:161:138)
    at Wa.primary (http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:152:102)
    at Wa.unary (http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:158:371)
    at Wa.multiplicative (http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:158:104)
    at Wa.additive (http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:157:466)
    at Wa.relational (http://127.0.0.1:81/Scripts/angular-v1.2.2/angular.min.js:157:330)

Which when I click the link says:

Syntax Error: Token 'q.qv.text' is unexpected, expecting [:] at column 4 of the expression [{{ q.qv.text }}] starting at [q.qv.text }}].

Satpal · Accepted Answer · 2014-01-02 17:47:07Z

1

IMHO, You should use.

 <markdown input="q.qv.text"></markdown>

You don't need {{}}

Use, As per comment. This gives a new error "ReferenceError: input is not defined" pointing to the line "scope.$watch(input,function(newvalue){"

scope.$watch(function(){
  return scope.input;
},function(newvalue){
 element.html(newvalue);
});

EDIT

Complete Directive code

app.directive('markdown', function () {
    return {
        restrict: 'E',
        scope: {
            input: '=input'
        },
        link: function (scope, element, attrs) {
            scope.$watch(function () {
                return scope.input;
            }, function (newvalue) {
                element.html(+newvalue * 6); 
            });
        }
    }
});

Usage

 <markdown input="myVar"></markdown>

Plunker DEMO

edited Jan 2, 2014 at 17:47

answered Jan 2, 2014 at 17:00

Satpal

133k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Samantha J T Star Over a year ago

This gives a new error "ReferenceError: input is not defined" pointing to the line "scope.$watch(input,function(newvalue){"

Samantha J T Star Over a year ago

I just realized there's a problem with this. I was showing you a suggested answer from Stack overflow. Now I realize the person who answered my last question missed out something. I will adjust the question and show the first directive which was not updating when needed

Samantha J T Star Over a year ago

Can you have a look at my first and second directive and if possible show a suggestion that gives all the lines of code for a new directive so I can test it out. What's important is that I have a directive that reacts to changes in the source which is either the "abc" or "input" Thanks

Samantha J T Star Over a year ago

I am sorry but your plunker does not show up. Can you just add the code to your answer. thanks

Samantha J T Star Over a year ago

Thanks but please can you add the directive answer to the question rather than just a few lines so other stack overflow users can see it. Also in your plunker you have function (newvalue) but you don't use newvalue :-( Also I tried your directive but in my code I get a message saying "TypeError: Cannot call method 'replace' of undefined" I think your code needs to take into account the first time when the value may not be defined at all.

|

Collectives™ on Stack Overflow

Error when calling a directive in AngularJS

1 Answer 1

EDIT

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT

6 Comments

Related