控制器不改变网址工作后， [英] Controller doesn't work after URL change

问题描述

简而言之：

我有一个控制器，触发一些jQuery我AngularJS网页淡出播放按钮和一个相应的图像。但是，当URL改变时，控制器不能在后续的网页。我使用的是动态网址，我想这就是为什么我的控制器是打破。

I have a controller that triggers some jQuery in my AngularJS web page to fade out a play button and a corresponding image. But, when the URL changes, the controller fails to work on subsequent pages. I'm using a dynamic URL, and I think that's why my controller is breaking.

详细信息

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

I've organized my controllers by having one for each page of my website app. Here you can see how my routes are setup:

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这里，因为我根本无法弄清楚如何在角做到这一点。不管怎么说，当我刷新页面，单击该按钮图像，它的工作原理。但是，我有一个'下一个'链接，通过加1的路线去到下一个页面在我的应用程序（100人的名单，其中一人在每一页上）。

I'm using jQuery here because I simply couldn't figure out how to do this in Angular. Anyways, when I refresh the page and click on the button image, it works. But, I have a 'next' link that increments the route by '1' to go to the next page in my app (a list of 100 people, with one person on each page).

当我使用这个链接去一个不同的页面，我的jQuery不再起作用。我猜这是因为路线不改变，即使该URL。总之，使我的动态路由这项工作？谢谢你。

When I go to a different page using this link, my jQuery no longer works. I'm guessing this is because the route isn't changing, even though the URL is. Anyway to make this work with my dynamic route? Thanks.

推荐答案

一对夫妇的事情...

A couple things...

1）你不需要 $。noConflict（）。角和jQuery发挥不错。

1) You don't need $.noConflict(). Angular and jQuery play nice.

2）你应该应该把一个角指令，而不是一个控制器内DOM脚本。下面是一个例子...

2) You should should put DOM scripting within an Angular Directive rather than a controller. Here's an example...

指令*：

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

假设你的模板是*：

Assuming your template is*:

<div person-player>
    <img class="img-polaroid img-person" ng-src="{{person.imgUrl}}">
    <div class="player">
        I'm a player.
    </div>
    <div class="btn-group">
        <button class="btn play-btn">
            <i class="icon-play"></i> Play
        </button>
        <button class="btn pause-btn">
            <i class="icon-pause"></i> Pause
        </button>
        <button class="btn stop-btn">
            <i class="icon-stop"></i> Stop
        </button>
    </div>
</div>

3）你可以使用CSS3过渡与 NG-点击来实现相同的行为没有任何jQuery的DOM脚本...

3) You could use CSS3 transitions with ng-click to achieve the same behavior without any jQuery DOM scripting...

新模板*：

<style>
    /* Twitter Bootstrap fade */
    .fade {
        opacity: 0;
        -webkit-transition: opacity 0.15s linear;
        -moz-transition: opacity 0.15s linear;
        -o-transition: opacity 0.15s linear;
        transition: opacity 0.15s linear;
    }
    .fade.in {
        opacity: 1;
    }
</style>

<div class="person-player">
    <img class="img-polaroid img-person fade {{imgPersonFade}}" ng-src="{{person.imgUrl}}">

    <div class="player fade {{playerFade}}">
        I'm a player.
    </div>
    <div class="btn-group">
        <button class="btn play-btn fade {{playBtnFade}}" ng-click="playing=true">
            <i class="icon-play"></i> Play
        </button>
        <button class="btn pause-btn">
            <i class="icon-pause"></i> Pause
        </button>
        <button class="btn stop-btn">
            <i class="icon-stop"></i> Stop
        </button>
    </div>
</div>

控制器*：

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 *应用程序框架，角鼓励你看数据/模型的变化，而不是听的DOM事件。事实上，我建议您尝试使用尽可能少的jQuery尽可能直到你得到了这个新模式转变的窍门。

Anyway, like many of the new JS MV* application frameworks, Angular encourages you to "watch" for data/model changes rather than "listen" for DOM events. In fact, I recommend trying to use as little jQuery as possible until you've got the hang of this new paradigm shift.

* code没有测试：）

* Code not tested :)

这篇关于控制器不改变网址工作后，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！