0

要するに：

AngularJS Web ページで jQuery をトリガーして、再生ボタンと対応する画像をフェードアウトさせるコントローラーがあります。ただし、URL が変更されると、コントローラーは後続のページで機能しなくなります。動的 URL を使用しているため、コントローラーが壊れていると思います。

詳細

ウェブサイト アプリの各ページに 1 つずつコントローラーを配置することで、コントローラーを整理しました。ここで、私のルートがどのように設定されているかを見ることができます:

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 人のリストで、各ページに 1 人ずつ)。

このリンクを使用して別のページに移動すると、jQuery が機能しなくなります。これは、URL が変更されているにもかかわらず、ルートが変更されていないためだと推測しています。とにかく、これを動的ルートで機能させるには？ありがとう。

4

1 に答える 1

0

いくつかのこと...

1) 必要ありません$.noConflict()。Angular と jQuery はうまく機能します。

2) DOM スクリプトは、コントローラーではなく Angular ディレクティブ内に配置する必要があります。ここに例があります...

指令*：

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

あなたのテンプレートが*であると仮定します：

<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-clickて、jQuery DOM スクリプトを使用せずに同じ動作を実現できます...

新しいテンプレート*:

<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* アプリケーション フレームワークと同様に、Angular では、DOM イベントを「リッスン」するのではなく、データ/モデルの変更を「監視」することをお勧めします。実際、この新しいパラダイム シフトに慣れるまでは、jQuery の使用をできるだけ少なくすることをお勧めします。

*コードはテストされていません:)

于 2013-06-20T07:48:14.127 に答える