URL 更改后控制器不起作用 [英] Controller doesn't work after URL change

问题描述

简而言之:

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

细节

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

angular.module('100_Ages', ['mydirectives', 'ngResponsiveImages']).配置(['$routeProvider'，函数($routeProvider){$routeProvider.当('/100_Ages'，{templateUrl:'partials/splash.html'，控制器:SplashCtrl}).when('/100_Ages/nav', {templateUrl: 'partials/nav.html', 控制器: NavCtrl}).when('/100_Ages/about', {templateUrl: 'partials/person-list.html', 控制器: AboutCtrl}).when('/100_Ages/0', {templateUrl: 'partials/splash.html', 控制器: SplashCtrl}).when('/100_Ages/:personId', {templateUrl: 'partials/person.html', 控制器: DetailCtrl}).否则({redirectTo:'/100_Ages'})；}]);

这是有问题的控制器:

function DetailCtrl($scope, $routeParams, $http) {//拉下一个包含我的数据的 JSON 文件以填充 Angular 模板$http.get('person.json').success(function(data) {//将人的 id 匹配到路由.angular.forEach(数据，功能(人){如果(person.id == $routeParams.personId)$scope.person = 人；});});//开始尝试集成按钮点击功能.$scope.$on('$routeChangeSuccess', function(){$.noConflict();jQuery(函数(){jQuery("#playButton").click(function(){jQuery("#person_photo").fadeOut('9000');jQuery("#playButton").fadeOut('9000');jQuery("#player").fadeIn('9000');});});});}

我在这里使用 jQuery，因为我根本不知道如何在 Angular 中做到这一点.无论如何，当我刷新页面并单击按钮图像时，它可以工作.但是，我有一个下一个"链接，它将路线增加1"以转到我的应用程序中的下一页(100 人的列表，每个页面上有一个人).

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

解决方案

一些事情...

1) 你不需要 $.noConflict().Angular 和 jQuery 玩得很好.

2) 您应该将 DOM 脚本放在 Angular 指令中而不是控制器中.这是一个例子...

指令*:

(函数(){函数 personPlayerDirective() {返回函数(范围，$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]);}());

假设您的模板是*:

<img class="img-polaroid img-person" ng-src="{{person.imgUrl}}"><div class="玩家">我是一名球员.
<div class="btn-group"><button class="btn play-btn"><i class="icon-play"></i>玩<button class="btn pause-btn"><i class="icon-pause"></i>暂停<button class="btn stop-btn"><i class="icon-stop"></i>停止

3) 您可以使用带有 ng-click 的 CSS3 转换来实现相同的行为，而无需任何 jQuery DOM 脚本...

新模板*: