角度指示の位置変化を検出する方法は？

は私は角度指令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(); 
     }); 
    } 
}

}）。

このディレクティブは、2つのイベントのフォーカスとブラーをチェックします。したがって、このディレクティブからロケーションの変更を確認する方法はありません。ウォッチ変数を追加$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"); 
      }); 
     } 
    }; 
}]);

に時計を追加

出典

2017-01-16 lakshay

これを試すことができます：https://docs.angularjs.org/api/ng/service/$location#$locationChangeSuccess – Aer0

どのルータを使用していますか？彼らはrouteChangeイベントを持っています – charlietfl

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

$locationChangeSuccessイベントに建てAngularsにリスナーをバインドしてください。このイベントは、アプリの場所の変更が完了するたびに発生します。

あなたのリンク機能は、このように見える可能性があります。

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

てみずっとそれがアプリケーションの負荷が増大するので、recomentedプロセスではありません。代わりに角度のjsで$locationChangeSuccessイベントを使用することができます。

<!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と、このようにそれを使用する：あなたはelem.on('focus/blur')を使用する場合は、あなたが変化を検出する角速度たい場合でも、コールバックでscope.$apply()を呼び出す必要がありますさらに

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

。

出典

2017-01-16 08:31:22 Walfrat

角度指示の位置変化を検出する方法は？

答えて

関連する問題