angularjs - Define and Watch a variable according to windowidth -

-

i'm struggling creating directive assign , update variable, compares window width, , updates resize.

i need variable compared using css because work ng-if. bare me, i'm new this. doing wrong? here code:

var app = angular.module('miniapp', []);

function appcontroller($scope) {}

app.directive('widthcheck', function ($window) {     return function (scope, element, attr) {          var w = angular.element($window);         scope.$watch(function () {             return {                 'w': window.innerwidth             };         }, function (newvalue, oldvalue, desktopplus, ismobile) {             scope.windowwidth = newvalue.w;             scope.desktopplus = false;             scope.ismobile = false;             scope.widthcheck = function (windowwidth, desktopplus) {                 if (windowwidth > 1399) {                scope.desktopplus = true;               }               else if (windowwidth < 769) {                 scope.ismobile = true;               }               else {                 scope.desktopplus = false;                 scope.ismoblie = false;               }             }          }, true);          w.bind('resize', function () {             scope.$apply();         });     } });

jsfiddle here: http://jsfiddle.net/h8m4eaem/2/

as mentioned in so answer it's better bind window resize event with-out watch. (similar mr. berg's answer.)

something in demo below or in fiddle should work.

var app = angular.module('miniapp', []);    function appcontroller($scope) {}    app.directive('widthcheck', function($window) {    return function(scope, element, attr) {      var width, detectfalse = {        desktopplus: false,        istablet: false,        ismobile: false      };        scope.windowwidth = $window.innerwidth;        checksize(scope.windowwidth); // first run        //scope.desktopplus = false;      //scope.ismoblie = false; // typo      //scope.istablet = false;      //scope.ismobile = false;        function resetdetection() {        return angular.copy(detectfalse);      }        function checksize(windowwidth) {        scope.detection = resetdetection();          if (windowwidth > 1000) { //1399) {          scope.detection.desktopplus = true;        } else if (windowwidth > 600) {          scope.detection.istablet = true;        } else {          scope.detection.ismobile = true;        }      }      angular.element($window).bind('resize', function() {        width = $window.innerwidth;        scope.windowwidth = width          checksize(width);        // manuall $digest required resize event        // outside of angular        scope.$digest();      });    }  });
.fess {    border: 1px solid red;  }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="miniapp" ng-controller="appcontroller">      <div width-check class="fess" resize>      window.width: {{windowwidth}}      <br />desktop plus: {{detection.desktopplus}}      <br />mobile: {{detection.ismobile}}      <br />tablet: {{detection.istablet}}      <br/>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more