web-dev-qa-db-ja.com

AngularJS：imgをngクリックしますか？ jQueryで画像（ギャラリーのようなもの）を操作しますか？

Ng-clickはimgタグで動作しますか？

<img ng-src="img" ng-click="openNewWindow(url)/>

myFunctionはコントローラーで定義され、$ scopeが使用可能です…何も呼び出されません。何か案は？

（画像がクリックされたときに新しいタブ/ウィンドウを開きたいのですが、自分の機能には入りません）

情報をありがとう

[〜＃〜] edit [〜＃〜]この質問を最初に尋ねたとき、私はおそらく急いだ。私の場合、なぜそれが機能しないのかがわかりました：何らかの「ギャラリー」効果のためにjQueryで画像を操作しています...（AngularJSでそれを行う方法をお持ちの方はお持ちください）。これは私が話しているhtmlです：

<div class="commercial-container">
    <img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen)" />
    <img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen2)" />
    <img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen3)" />
    <img class="commercial" ng-src="pathToImageOrImageVar" ng-click="openNewWindow(urlToOpen4)" />
</div>

そして、ここで私はフェードイン/フェードアウト効果を作成するjQuery（1つの画像を表示し、次の画像を無限に表示する）

 function fadeInLastImg(){
    var backImg = $('.commercial-container img:first');
    backImg.hide();
    backImg.remove();
    $('.commercial-container' ).append( backImg );
    backImg.fadeIn();
};

私の本当の質問はこれです：

  • 画像をngクリックできるようにjQueryと同じ動作を得るにはどうすればよいですか？

もちろん、このような画像を変更するためのより良い解決策（おそらくAngularJSの1つ）を提供できます。

ありがとうございました

angularjsangularjs-ng-click
15
trainoasis

はい、 ng-clickは画像に対して機能します。

さらにコードがなければ、なぜあなたのコードが機能しないのかはわかりませんが、貼り付けたコードは、その要素を制御するコントローラーのスコープでmyFunctionを呼び出します。

[〜＃〜] edit [〜＃〜]

このためにjQueryを使用する必要は絶対にありません。jQueryを「角度のある」考え方で考えているわけではありません。

私の提案は、これを行うためのディレクティブを作成することです。 plunkerを作成しました の簡単な例を示しました。

概要は次のとおりです。

注：アニメーションは重要であるため、ng-animate srcを作成し、アプリモジュール定義に依存関係として含めます。ベースアングルと同じバージョンのアニメーションを使用します。

[〜＃〜] html [〜＃〜]

<script src="http://code.angularjs.org/1.2.13/angular.js"></script>

<script src="http://code.angularjs.org/1.2.13/angular-animate.js"></script>

Javascript

angular.module("gallery", ['ngAnimate'])

次に、ディレクティブのテンプレートを定義します。

galleryPartial.html

<div class="container">
  <img ng-src="{{image.url}}" 
       alt="{{image.name}}" 
       ng-repeat="image in images" 
       class="gallery-image fade-animation"
       ng-click="openInNewWindow($index)"
       ng-show="nowShowing==$index">
</div>

このテンプレートは単純にと言います。「スコープの 'images'配列にリストされたすべてのアイテムに1つのイメージが必要です。srcはイメージのurlプロパティで、altテキストは名前です。 。画像をクリックすると、openInNewWindow関数を実行して配列内のその画像のインデックスを渡します。最後に、nowShowing変数がインデックスに設定されていない限り、画像を非表示にします。 "

また、クラスfade-animation。これは何でも呼ばれますが、これは後でCSSでアニメーションを定義するために使用するクラスです。

次に、ディレクティブ自体を記述します。それは非常に単純です-このテンプレートを使用し、openInNewWindow関数を定義するだけでなく、配列インデックスを使用してnowShowingを反復するだけです。

.directive('galleryExample', function($interval, $window){
  return {
    restrict: 'A',
    templateUrl: 'galleryPartial.html',
    scope: {
      images: '='
    },
    link: function(scope, element, attributes){
      // Initialise the nowshowing variable to show the first image.
      scope.nowShowing = 0;

      // Set an interval to show the next image every couple of seconds.
      $interval(function showNext(){
        // Make sure we loop back to the start.
        if(scope.nowShowing != scope.images.length - 1){
          scope.nowShowing ++;
        }
        else{
          scope.nowShowing = 0;
        }
      }, 2000);

      // Image click behaviour
      scope.openInNewWindow = function(index){
        $window.open(scope.images[index].url);
      }
    }
  };
})

isolate scope を使用して、このディレクティブを再利用可能にし、物事をうまく分離していることがわかります。これを行う必要はありませんが、それは良い習慣です。したがって、ディレクティブのhtmlは、次のように、ギャラリーに配置する画像も渡す必要があります。

index.html

  <body ng-controller="AppController">
    <div gallery-example="" images="imageList"></div>
  </body>

したがって、記述する必要があるjavascriptの最後の部分は、その画像配列をAppControllerスコープに取り込むことです。通常、サービスを使用してサーバーなどから画像のリストを取得しますが、この場合はハードコーディングします。

.controller('AppController', function($scope){
  $scope.imageList = [
    {
      url: 'http://placekitten.com/200/200',
      name: 'Kitten 1'
    },
    {
      url: 'http://placekitten.com/201/201',
      name: 'Kitten 2'
    },
    {
      url: 'http://placekitten.com/201/202',
      name: 'Kitten 3'
    },
    {
      url: 'http://placekitten.com/201/203',
      name: 'Kitten 4'
    }
  ]
})

最後に、スタイリング。これにより、アニメーションも定義されます（ng-hideクラスなど）。 これについてはこちらを読んでください この記事でカバーするには大きすぎる主題なので（すでに長い！）答え：

.fade-animation.ng-hide-add,
.fade-animation.ng-hide-remove {
  -webkit-transition:0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  transition:0.5s linear all;

  display:block !important;
  opacity:1;
}

これが最終結果です

24
Ed Hinchliffe

[〜＃〜] edit [〜＃〜]あなたがコメントで言ったようにbootstrapはオプションではありませんあなたのために、私はあなた自身の小さなディレクティブを書くことをお勧めします。 this

あなたの場合の問題は、Angular-Scopeの外部からDOMを操作することです。だからAngular iteslfはこれらの新しい画像要素についても知らず、さらにng-clickおよびng-srcディレクティブについても知りません。これは、Angulars独自の$を使用する場合のみですcompile-Serviceを使用して、イメージをDOMに戻します。

画像ギャラリーには Angular-UI Bootstrap を使用することをお勧めします。そうでなければ、このために独自のディレクティブを作成する必要がありますが、なぜ車輪を再発明するのですか？

0
Charminbear

AngularJSのエイリアスを使用した場合に、この問題が発生しました。このようなものを書いた場合：

function someController($scope) {
    var vm = this;

    vm.switchSelected = function (passedEvent) {
    }
}

そして、HTMLコードで次を書く場合：

<div ng-controller="toolBoxController as tbc">

switchSelectedを使用するには、次のような記述が必要です。

<img ng-src="{{si}}" width="230px" ng-click="tbc.switchSelected($event)"/>

だから、使用したことを確認してください

 var vm=this;

コントローラーで。次に、HTMLパーツにエイリアスを追加する必要があります。

0
Yuriy Zaletskyy

最終的に各画像をリンクでラップし、jQueryを適切に変更しました。それは私にとって最速かつ最も簡単でした。

<a href="url" target="_blank">
   <img class="commercial" ng-src="pathToImageOrImageVar"/>
</a>

そして変更された行

var backImg = $('.commercial-container img:first');

に変更されました

var backImg = $('.commercial-container a:first');
0
trainoasis