AngularJS:链接的问题，如何使用标记

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

本文关键字：何使用 问题 链接 AngularJS      更新时间：2023-09-26

我遇到了一个类似的问题传递变量到指令模板没有创建新的范围，这似乎没有帮助我。代码看起来像;

.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

billDir没有像预期的那样工作，我没有得到{{msg}}的位置

我在这里做错了什么?

小提琴

深入查看您的代码，我发现您的指令标记存在一个可以理解的错误。当通过指令创建HTML元素时，必须添加restrict: 'E'。

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!";
        }
    }
});

如果你没有声明一个restrict:，那么angular会假设你想让这个指令像一个div的属性一样运行，比如<div bill-info></div>

下面是小提琴的例子:http://jsfiddle.net/bebold/4b3NL/9/

相关文章：