0

我正在处理模态图像弹出窗口。对于我正在处理的项目，脚本/ ng-template 似乎是让它工作的唯一方法。当我像这样对 ng-src 进行硬编码时，它适用于一张图像：

<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

我对角度相当陌生，非常感谢任何帮助！

4

0 回答 0