2015-02-15 4 views
1

Я хочу обновить какое-то выражение всякий раз, когда изменяется размер окна. Ниже моя директива показывает, что я пробовал.Ссылка на параметр в angularjs

SCRIPT

var app = angular.module("myApp", []); 
app.controller("validate", function($scope, $window) { 
    $scope.outp = "hello"; 
}); 
app.directive("responsive", function($window) { 
    return { 
     resterict: "AE", 
     link: function cLink(scope, element, attrs) { 
      console.log(element); 
      scope.widthe = ($window).outerWidth; 
      //scope.$watch("widthe",function(newValue, oldValue){ 
      //scope.chnage = newValue; 

      //}); 

      element.bind("resize", function() { 
       console.log("called"); 
       scope.$apply(); 
      }); 
     } 

    } 

}); 

HTML

<body ng-app="myApp"> 
    <div ng-controller="validate" responsive> 
     <div style="border:solid;width:500px;height:500px;"> 
      <div>present width is {{width}}</div> 
      <div>{{chnage}}</div> 
      <button id="clicks">click me</button> 
     </div> 
    </div> 
</body> 

Используя приведенный выше код, я не в состоянии связать размер событие с элементом. Я хочу обновлять ширину при каждом изменении размера окна. Не могли бы вы помочь мне найти решение на нем с предложениями по рефакторингу кода.

Справка была бы оценена. Заранее спасибо!!

+1

just do window.onresize https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize –

+0

@DayanMorenoLeon Вы правы, я просто предлагаю использовать сервис '$ window' вместо 'window' –

ответ

0

Вы должны использовать window.onresize функции внутри вашей ссылки директивы, то высота меняется логик будет лежать внутри, но если вы хотите сделать это в угловом способе, то вам нужно использовать $window API угловатого же, как и у window.

Директива

app.directive("responsive", function($window) { 
    return { 
     resterict: "AE", 
     link: function cLink(scope, element, attrs) { 
      console.log(element); 
      scope.width = ($window).outerWidth; 
      //scope.$watch("widthe",function(newValue, oldValue){ 
       //scope.chnage = newValue; 

      //}); 

      angular.element($window).bind('resize', function() { 
       console.log("called"); 
       scope.$apply(); 
      }); 
     } 
    } 
}); 

Надеется, что это может помочь вам. Благодарю.

+0

Он работает для вас? –

+0

Спасибо большое! он привязал функцию изменения размера. Что можно сделать для обновления выражения в моем HTML при изменении размера окна? –

+0

Вы можете сделать это, используя '$ broadcast', а затем' $ on' вы можете прослушать это событие –

Смежные вопросы