Question

尝试编写一个指令，它基本上将按钮的高度设置为包含div的宽度（好的，我可能会添加一些边距，但现在它的宽度）

我的问题是，如何获得包含div的宽度。所以HTML看起来如下：

   <div bigbutton="">
        <button class="btn btn-info btn-lg btn-icon center-block"><i class="fa fa-plus fa-2x"></i><br><h6>Add one</h6></button>
   </div>

尝试以下（有效但窗口大小）

app.directive('bigbutton', function ($window) {

    return {
        restrict: 'A',

        link: function (scope, elem, attrs) {

            var winWidth = $window.clientWidth;
            console.log("Window width: " + winWidth)
            var winHeight = winWidth
            elem.css('height', winWidth + 'px');
            elem.css('width', winHeight + 'px');
            elem.css('background-color', 'black');
        }
    };
});

尝试使用事件（发现一些文字说可以做到这一点，但是不能让注射器接受$事件）

app.directive('bigbutton', function ($window, $event) {

    return {
        restrict: 'A',

        link: function (scope, elem) {

            var winWidth = $($event.target).parent().outerWidth();
            console.log("Window width: " + winWidth)
            var winHeight = winWidth
            elem.css('height', winWidth + 'px');
            elem.css('width', winHeight + 'px');
            elem.css('background-color', 'black');
        }
    };
});

想想我可能会在错误的树上狂奔。

Answer 1

好的，终于找到了。去父母的时候出错了。诀窍似乎是elem [0]而不是elem.parrent

app.directive('bigbutton', function ($window) {

    return {
        restrict: 'A',

        link: function (scope, elem) {

            var winWidth = elem[0].clientWidth;
                //elem.parent().width;
            console.log("Window width: " + winWidth)
            var winHeight = winWidth
            elem.css('height', winWidth + 'px');
            elem.css('width', winHeight + 'px');
            elem.css('background-color', 'black');
        }
    };
});

使用角度获得父宽度

1 个答案: