更改URL后，控制器不起作用

简而言之：

我有一个控制器，可以在我的AngularJS网页中触发一些jQuery来淡出播放按钮和相应的图像。 但是，当URL更改时，控制器无法在后续页面上工作。 我正在使用动态URL，我认为这就是我的控制器坏了的原因。

详情

我通过为我的网站应用程序的每个页面添加一个来组织我的控制器。 在这里你可以看到我的路线是如何设置的：

angular.module('100_Ages', ['mydirectives', 'ngResponsiveImages']). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/100_Ages', {templateUrl: 'partials/splash.html', controller: SplashCtrl}). when('/100_Ages/nav', {templateUrl: 'partials/nav.html', controller: NavCtrl}). when('/100_Ages/about', {templateUrl: 'partials/person-list.html', controller: AboutCtrl}). when('/100_Ages/0', {templateUrl: 'partials/splash.html', controller: SplashCtrl}). when('/100_Ages/:personId', {templateUrl: 'partials/person.html', controller: DetailCtrl}). otherwise({redirectTo: '/100_Ages'}); }]); 

这是有问题的控制器：

 function DetailCtrl($scope, $routeParams, $http) { // Pull down a JSON file with my data to populate Angular template $http.get('person.json').success(function(data) { // matches person's id to route. angular.forEach(data, function(person) { if (person.id == $routeParams.personId) $scope.person = person; }); }); // start of attempt to integrate button click functionality. $scope.$on('$routeChangeSuccess', function(){ $.noConflict(); jQuery(function(){ jQuery("#playButton").click(function(){ jQuery("#person_photo").fadeOut('9000'); jQuery("#playButton").fadeOut('9000'); jQuery("#player").fadeIn('9000'); }); }); }); } 

我在这里使用jQuery因为我根本无法弄清楚如何在Angular中执行此操作。 无论如何，当我刷新页面并单击按钮图像时，它可以工作。 但是，我有一个“下一个”链接，将路线增加“1”以转到我的应用中的下一页（100个人的列表，每个页面上有一个人）。

当我使用此链接转到其他页面时，我的jQuery不再有效。 我猜这是因为路由没有改变，即使URL是。 无论如何使用我的动态路线工作？ 谢谢。

Answer 1

几件事……

1）您不需要$.noConflict() 。 Angular和jQuery很好玩。

2）您应该将DOM脚本放在Angular Directive而不是控制器中。 这是一个例子……

指示*：

 (function () { function personPlayerDirective() { return function (scope, $element, attr) { $element.find('.play-btn').click(function () { $element.find(".img-person").fadeOut('9000'); $element.find(".play-btn").fadeOut('9000'); $element.find(".player").fadeIn('9000'); }); }; } angular.module('app', []) .directive('personPlayer', [personPlayerDirective]); }()); 

假设你的模板是*：

 
  
 I'm a player. 
 
   Play    Pause    Stop  
  

3）你可以使用ng-click使用CSS3过渡来实现相同的行为，而无需任何jQuery DOM脚本…

新模板*：

  
  
 I'm a player. 
 
   Play    Pause    Stop  
  

控制器*：

 function DetailCtrl($scope, $routeParams, $http) { $scope.playing = false; // Update the *Fade scope attributes whenever the `playing` scope attribute changes $scope.$watch('playing', function (playing) { $scope.playerFade = playing ? 'in' : ''; $scope.imgPersonFade = playing ? '' : 'in'; $scope.playBtnFade = playing ? '' : 'in'; }); // Pull down a JSON file with my data to populate Angular template // ... } 

无论如何，像许多新的JS MV *应用程序框架一样，Angular鼓励您“观察”数据/模型更改，而不是“监听”DOM事件。 事实上，我建议尝试使用尽可能少的jQuery，直到你掌握了这种新的范式转变。

*代码未经测试:)