0

モーダル画像ポップアップに取り組んでいます。私が取り組んでいるプロジェクトでは、 script/ng-template がそれを機能させる唯一の方法のようです。次のように ng-src をハードコーディングすると、1 つのイメージで機能します。

<script type="text/ng-template" id="openModal">
   <div class="modal-header">
       <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">&times;</span></button>
       <div class="breath"></div>
   </div>
   <div class="modal-body">
       <div class="container">
           <img height="429" width="750" ng-src="public/img/image1.jpg" class="img-responsive" alt="" />               
       </div>
   </div>

ただし、ng-src を変更できるようにしたいです。データ バインディングを使用してこれを実行しようとしたことについて、ここでいくつかのアドバイスを得ましたが、問題が発生しています。このため、以下は私のコードと、ng-controller とデータ バインディングを追加しようとしたときに発生するエラーです。

HTML では:

<script type="text/ng-template" id="openModal">
  <div ng-controller="ModalCtrl">
    <div class="modal-header">
       <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">&times;</span></button>
       <div class="breath"></div>
    </div>
    <div class="modal-body">
       <div class="container">
           <img height="429" width="750" ng-src="{{modalImg}}" class="img-responsive" alt="" />               
       </div>
    </div>
 </div>

JS の場合 (「app」は既に初期化されているか、コードの他の部分で他のコントローラーに使用されます):

app.controller('ModalCtrl', function ($scope) {
   $scope.modalImg = "public/img/image1.jpg";
});

テストのためにコントローラーのパスをハードコーディングしただけですが、これを機能させることができれば、コントローラーを使用してイメージパスを変更することを願っています。

これらを追加した後、エラーが発生します：

エラー: [$compile:tpload] とリンク先: https://docs.angularjs.org/error/ $compile/tpload?p0=openModal&p1=404&p2=Not%20Found

私はAngularにかなり慣れていないので、どんな助けも大歓迎です!

4

0 に答える 0