Wie erkennt man eine Positionsänderung in einer Winkelanweisung?

I eine Winkel Richtlinie detectFocus als:Wie erkennt man eine Positionsänderung in einer Winkelanweisung?

app.directive("detectFocus", function ($focusTest, $location, $rootScope) { 
return { 
    restrict: "A", 
    scope: { 
     onFocus: '&onFocus', 
     onBlur: '&onBlur', 
    }, 
    link: function (scope, elem) { 
     $rootScope.$on('$locationChangeSuccess', function (event, newUrl, oldUrl) { 
      return; 
     }); 

     elem.on("focus", function() { console.log("focus"); 
      scope.onFocus(); 
      $focusTest.setFocusOnBlur(true); 
     }); 

     elem.on("blur", function() { console.log("blur"); 
      scope.onBlur(); 
      if($focusTest.getFocusOnBlur()) 
       elem[0].focus(); 
     }); 
    } 
}

});

Diese Direktive prüft zwei Ereignisfokus und Unschärfe, also gibt es eine Möglichkeit, die Standortänderung von dieser Direktive zu überprüfen.

Quelle

2017-01-16 lakshay

Sie können dies versuchen: https://docs.angularjs.org/api/ng/service/$location#$locationChangeSuccess – Aer0

welchen Router verwenden Sie? Sie haben routeChange Ereignisse – charlietfl

UI-Router/.............. – lakshay

Versuchen einen Zuhörer auf winkelförmigen Stangen Bindung in $locationChangeSuccess Ereignis gebaut. Dieses Ereignis wird jedes Mal ausgelöst, wenn Ihre App einen Standort geändert hat.

Ihre Link-Funktion könnte so aussehen.

link: function($rootScope) { 
    $rootScope.$on('$locationChangeSuccess', function (event, newUrl, oldUrl) { 
    console.log('Changed from ', oldUrl, ' to ', newUrl); 
    }); 
}

Quelle

2017-01-16 08:17:26 Aer0

können Sie mir zeigen, wie das zu tun – lakshay

Ihr Code erkennt die Änderungen des Standorts. Aber sobald meine Fokusfunktion der Direktive läuft, funktioniert sie nicht. Ich habe die Frage bearbeitet. – lakshay

Versuchen Sie, eine Uhr auf $location.path()

myModule.directive('highlighttab', ['$location', function(location) { 

    return { 
     restrict: 'C', 
     link: function($scope, $element, $attrs) { 
      var elementPath = $attrs.href.substring(1); 
      $scope.$location = location; 
      $scope.$watch('$location.path()', function(locationPath) { 
       (elementPath === locationPath) ? $element.addClass("current") : $element.removeClass("current"); 
      }); 
     } 
    }; 
}]);

Zugabe Uhr variable Zugabe ist nicht viel ein recomented Prozess, da sie die Last der Anwendung erhöhen. Stattdessen können Sie das Ereignis $locationChangeSuccess in eckigen js verwenden.

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script> 
 

 
<script> 
 
    var app = angular.module('routeApp', ['ngRoute']); 
 

 
    app.config(['$routeProvider', function ($routeProvider) { 
 
     $routeProvider.when('/addStudent', { 
 
       template: '<div>Add Student</div>', 
 
       controller: 'addStudentController' 
 
      }) 
 
      .when('/viewStudent', { 
 
       template: '<div>View Student</div>', 
 
       controller: 'viewStudentController' 
 
      }) 
 
      .otherwise({ 
 
       redirectTo: '/' 
 
      }); 
 
    }]); 
 

 
    app.directive('activeLink', ['$location', function (location) { 
 
     return { 
 
      restrict: 'A', 
 
      link: function (scope, element, attrs, controller) { 
 
       var clazz = attrs.activeLink; 
 
       var path = attrs.href; 
 
       path = path.substring(1); //hack because path does bot return including hashbang 
 
       scope.location = location; 
 
       scope.$on('$locationChangeSuccess', function() { 
 
        console.log('$locationChangeSuccess changed!', new Date()); 
 
       }); 
 
      } 
 

 
     }; 
 

 
    }]); 
 

 
    app.controller('addStudentController', function ($scope) { 
 
     $scope.message = "This is message from add student controller"; 
 

 
    }); 
 

 
    app.controller('viewStudentController', function ($scope) { 
 
     $scope.message = "This is message from view student controller"; 
 
    }); 
 

 
    app.controller('pageController', function ($scope, $location) { 
 
     $scope.GoTo = function (URl) { 
 
      $location.path('/' + URl); 
 
     }; 
 
    }); 
 
</script> 
 

 

 
<body ng-app="routeApp" ng-controller="pageController"> 
 
    <h2>Sample Application</h2> 
 

 
    <a href="#/addStudent" active-link="active">Add Student</a> 
 
    <a href="#/viewStudent" active-link="active">View Student</a> 
 
    <a href="#" active-link="active">home</a> 
 

 

 
    <div ng-view></div> 
 

 
</body> 
 

 

 
</html>

Quelle

2017-01-16 08:08:54 Nitheesh

Ich würde nicht auf diese Weise empfehlen. Die Verwendung von $ watch kann zu Leistungsproblemen führen. Da es dafür einen nativen Winkelweg gibt, sollte man sich daran halten. Also sollte $ location. $ LocationChangeSuccess() 'der richtige Weg sein. – Aer0

Ja, das ist auch ein guter Ansatz. – Nitheesh

inject $ rootScope und es wie folgt verwendet werden:

$rootScope.$on('$stateChangeStart', function(evt, to, params) { 
    //do your stuff here 
}

Außerdem, wenn Sie verwenden elem.on('focus/blur') Sie anrufen müssen scope.$apply() in der sogar Rückruf, wenn Sie Winkel wollen die Änderungen zu erkennen.

Quelle

2017-01-16 08:31:22 Walfrat

Wie erkennt man eine Positionsänderung in einer Winkelanweisung?

Antwort

Verwandte Themen