Stack Overflow 17159652 - 2

by christopheviau

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainCtrl">
      <dir1 id="d1"></dir1>
    </div>
</div>

CSS

#d1{
    display: block;
    position: absolute;
    border: 1px solid red;
    width: 100%;
    height: 300px;
}

JavaScript

var app = angular.module('myApp',[]);
app.controller('MainCtrl', function($scope) {

});
app.directive('dir1', ['$timeout', function(timer){
  return {
    restrict: 'E',
      template : '<input ng-model="msg">dir1 width = {{message()}}</input>',
    link : function(scope, el, attrs) {

        scope.msg = function(d, i){ return 'test'; }
        scope.message = timer(getMessage, 0);
        var getMessage = function(d, i){ return $(el).width(); };

    }
  }
}]);

$(function(){
  
  $(window).on('resize', function() {
    var domElement = document.getElementById('d1');
    var scope = angular.element(domElement).scope();  
    scope.$apply();
  });  
  
});