Получение ширины родителя с использованием углового

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'); 
     } 
    }; 
}); 

Пытались использовать событие (найденный текст, который сказал, что может сделать трюк, но не может получить инжектор, чтобы принять $ event)

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

ОК, наконец, нашел его. Пошло не так, как с родителями. Хитрость, кажется, элем [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'); 
     } 
    }; 
});