Как определить изменение местоположения в угловой директиве?

У меня есть угловая директиву detectFocus как:Как определить изменение местоположения в угловой директиве?

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(); 
     }); 
    } 
}

});

Эта директива проверяет два фокуса и размытие событий, так что есть ли способ проверить изменение местоположения этой директивы.

источник

2017-01-16 lakshay

Вы можете попробовать: https://docs.angularjs.org/api/ng/service/$location#$locationChangeSuccess – Aer0

какой маршрутизатор вы используете? У них есть события routeChange – charlietfl

ui-router/.............. – lakshay

Постарайся связывание слушателя на встроенный в углам главного $locationChangeSuccess события. Это событие запускается каждый раз, когда ваше приложение заканчивает изменение местоположения.

Ваша функция связи может выглядеть примерно так.

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

источник

2017-01-16 08:17:26 Aer0

может показать мне, как это сделать – lakshay

ваш код определяет изменения местоположения. но как только моя функция фокусировки директивы работает, она не работает. Я редактировал вопрос. Пожалуйста, посмотрите. – lakshay

Попробуйте добавить часы на $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"); 
      }); 
     } 
    }; 
}]);

добавления переменных часы не степени recomented процесс, так как это приведет к увеличению нагрузки приложения. Вместо этого вы можете использовать событие $locationChangeSuccess в угловых js.

<!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>

источник

2017-01-16 08:08:54 Nitheesh

Я бы не рекомендовал этот способ. Использование $ watch может привести к проблемам с производительностью. Поскольку для этого есть естественный Угловой способ, вы должны придерживаться этого. Поэтому '$ location. $ LocationChangeSuccess()' должно быть правильным. – Aer0

Да, это тоже хороший подход. – Nitheesh

инъекционные $ rootScope и использовать его как это:

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

Кроме того, если вы используете elem.on('focus/blur') вы должны вызвать scope.$apply() в четный обратного вызова, если вы хотите, угловатый, чтобы обнаружить изменения.

источник

2017-01-16 08:31:22 Walfrat

Как определить изменение местоположения в угловой директиве?

ответ

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