AngularJS: issues with link, how do I use markups?

Question

I've run into a similar problem to Passing variable to directive template without creating new scope and this doesn't seem to help me. The code looks like;

.directive('billDir', function () {
    return {
        template: '<div><div draggable>hello {{msg}}</div></div>',
        link: function (scope, elem, attrs) {
            // scope.status = attrs.bill.getStatus();
            scope.msg = "world!";
        }
    }
})
.directive('draggable', function ($document) {
    return {
        scope: {
            bill: '='
        },
        replace: true,
        restrict: 'A',
        link: function (scope, element, attr) {
            // do something here
            var startX = 0,
                startY = 0,
                x = 0,
                y = 0,
                sourceX = 0,
                sourceY = 0,
                windowWidth = 0;

            element.on('mousedown', function (event) {
                event.preventDefault();
                startX = event.pageX - x;
                startY = event.pageY - y;
                $document.on('mousemove', mousemove);
                $document.on('mouseup', mouseup);
                windowWidth = $(window).width();
                sourceY = event.pageY;
                sourceX = event.pageX;
            }); // some more stuff, to the end of the directive

And billDir doesn't work as expected, I don't get anything in place of {{msg}}

What am I doing wrong here?

Fiddle

@maurycy for me, its a blank result http://jsfiddle.net/asheshambasta/4b3NL/1/embedded/result/ (nothing unusual on the console either) — Ashesh, Mar 11 '14 at 15:22
Bump, too bad SE went on maintenance right after I posted this. — Ashesh, Mar 11 '14 at 16:39

score 1 · Accepted Answer · answered Mar 11 '14 at 16:39

Looking deeper into your code, I found an understandable mistake with your directive markup. You must add restrict: 'E', when creating an HTML element through a directive.

app.directive("billInfo", function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div><div draggable>hello {{msg}}</div></div>',
        link: function (scope, element, attrs) {
            scope.msg = "world! It Works!";
        }
    }
});

If you do not declare a restrict: then angular assumes you want the directive to behave as an attribute to a div such as <div bill-info></div>

Here is the fiddle example: http://jsfiddle.net/bebold/4b3NL/9/

AngularJS: issues with link, how do I use markups?

1 Answers1