使用角度獲取父寬度

試圖編寫一個基本上將按鈕的高度設置爲包含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'); 
     } 
    }; 
});

想想我可能會吠叫錯誤的樹儘管。

來源

2016-01-22 vrghost

爲什麼你使用'限制：「A''對你所申請的一類指令？您應該使用'restrict：'C''或將該指令作爲它自己的屬性應用於按鈕（'

嗯，我不確定A vs C是幹什麼的，但是如果我把它作爲C完全停止工作（根本不會改變代碼）。此外，我很抱歉，複製錯誤的HTML（現在編輯） – vrghost

限制是爲了定義它是什麼樣的指令。屬性，元素，類。 – ryanyuyu

好的，終於找到了。去找父母會出錯。訣竅似乎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'); 
     } 
    }; 
});

來源

2016-01-22 17:56:03 vrghost

使用角度獲取父寬度

回答

相關問題