Angularjs：獲得父元素寬度

HTML」Angularjs：獲得父元素寬度

<div id="parent"> 
     <input type=button ng-click="getWidth()"> 
</div>

JS：

function Ctrl($scope) { 
     $scope.getWidth = function(){ 
      // How to get div[id=parent] width here? 
     } 

    }

所以我的問題是如何讓家長格中的getWidth方法

來源

2015-03-03 Ray Long

您可以通過注射'$ document'或'$ element'到您的控制器，但更好的方法訪問DOM將是把DOM東西變成指令。如果你提供更多的信息，你想用父母的寬度來處理，我們可以給出更好的答案。 – hansmaad 2015-03-03 08:50:47

使用$event.target獲得元素？點擊然後用jquery查找寬度

function SimpleController($scope) { 
 
    $scope.width = 0; 
 
    $scope.getWidth = function($event) { 
 
    // How to get div[id=parent] width here? 
 
    $scope.width = $($event.target).parent().outerWidth(); 
 

 
    } 
 
}

#parent{ 
 
    background-color : red; 
 
    width : 200px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script> 
 
<div class="container" ng-app="" ng-controller="SimpleController"> 
 

 

 
    <div id="parent"> 
 
    parent width : {{width}} 
 
    <button type=button ng-click="getWidth($event)"> find width </button> 
 
    </div> 
 

 
</div>

來源

2015-03-03 09:05:13

檢查答案，如果它已經解決了你的查詢PLZ ... – 2015-03-03 09:48:31

像hansmaad的回答，你最好使用指令來處理DOM的東西。

app.directive('getWidth', ['$timeout', '$location', function($timeout, $location) { 
    return { 
    scope: { 
     callbackFn: "&" 
    }, 
    link: function(scope, elem, attrs) { 
     scope.callbackFn({width: elem[0].clientWidth}); 
    } 
    } 
}]);

在HTML

<body ng-controller="MainCtrl" > 
    <div get-width callback-fn="returnWidth(width)" style="height:100%; width: 100%;"> 
      <p >Hello {{name}}!</p> 
    </div> 
    </body>

工作示例 here

來源

2015-03-03 10:55:49 Vicruz

Angularjs：獲得父元素寬度

回答

相關問題