Question

我正在制作模态图像弹出窗口。对于我正在进行的项目，脚本/ 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/ $编译/ tpload P0 = openModal＆安培; P1 = 404＆安培; P2 =未％20Found

我对角度很新，任何帮助都非常感谢！

如何在脚本标签/ ng-template中使用ng-controller？

0 个答案: