Question

我编写了一个指令，如果父div重新调整大小，则将样式属性设置为div，但如果实际的div调整大小，我也需要相同的操作。我不确定该怎么做。指令代码如下：

app.directive('frontTextStyle', function ($compile) {
return {
    link: function (scope, element, attrs) {



        scope.getWidth = function () {
        return element.parent()[0].offsetWidth;
        };

        scope.$watch(scope.getWidth, function (width) {
            var fs; var v; var h;
            fs = scope.field.fontSize / scope.field.relativeDivWidth * (element.parent()[0].offsetWidth + 1);
            var t = "position: absolute; display: inline-block; overflow:hidden; color: " + scope.field.colour + "; font-family: " + scope.field.font + "; font-size: " + fs + "px;";
            console.log("t1desktop", t);
            attrs.$set("style", t);


            if (scope.field.hAlign == "left") {
                h = " left: 0;";

            }

            if (scope.field.hAlign == "right") {
                h = " right: 0;";
            }

            if (scope.field.hAlign == "center") {
                h = " left:" + ((element.parent()[0].offsetWidth - element[0].offsetWidth) / 2) + "px;";
                console.log("middletest", element.parent()[0].offsetWidth, element[0].offsetWidth)
            }

            if (scope.field.vALign == "top") {
                v = " top: 0;";
            }

            if (scope.field.vAlign == "bottom") {
                v = " bottom: 0;";
            }

            if (scope.field.vAlign == "middle") {

                v = " top: " + ((element.parent()[0].offsetHeight - (fs * 1.42857143)) / 2) + "px;";
            }



            console.log("v", v);
            t += v + h;
            attrs.$set("style", t);




        });
    },
    scope: {
        info: "=",
        field: "="
    }
}

}）;

因此，如果element.parent（）调整大小，指令就会运行 - 如果元素调整大小，我还需要它运行 - 但如果我在元素上放了两个指令，那么我会得到一个错误，说有多个隔离范围，而且我不确定我是否可以改变观察声明以寻找任何改变。

attrs。$ set应用两次 - 首先设置div的大小，因为这是由文本设置的，而font-size是由数据驱动的。一旦将div设置为正确的大小，就会为div设置顶部和左侧，因此它在父级内部正确定位。

这有一个简单的解决方案吗？

如果元素宽度或父宽度发生变化，则需要运行angularjs指令

0 个答案: