Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <title>JS Bin</title>
</head>
<body ng-controller="TestController">
  
<my-dir> </my-dir>  
</body>
  
</html>
 
.my-dir{
  width:400px;
  height:100px;
  background-color:red;
}
.my-dir-content{
  position:absolute;
  height:150px;
  width:100px;
  background-color:yellow;
}
 
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', ['$scope', function($scope) {
        $scope.selectOption = '2';
}]);
myApp.directive('myDir', function() {
  return {
    restrict: 'E',
    link : function (scope, element) {
      var myWidth = element.width();
      var mySon = element.find('.my-dir-content');
      console.log(myWidth);
      mySon.width(myWidth);     },
        template: '<div class="my-dir">' +
    '<div class="my-dir-content"> </div>' +
    '</div>'
  };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers