Angularjs 从包含图像阵列的控制器进行角度拉动的引导模式_Angularjs

Angularjs 从包含图像阵列的控制器进行角度拉动的引导模式

angularjs

Angularjs 从包含图像阵列的控制器进行角度拉动的引导模式,angularjs,Angularjs,我有一个角度控制器，它保存一组图像、url和字符串。目前，我正在使用这个带有ng repeat的控制器来构建一个中继器，该中继器在gallery类型的功能中显示这些图像。我将一个引导模式编码到图像按钮上，一旦单击该按钮，它就会打开模式，以在灯箱模拟中显示图像。所有这些都有效，除了，图像不会出来，除非我叫ng repeat。问题是我在模态中得到了所有的图像（就像ng重复那样忠实）。我的挑战是，我只希望被点击的图像是出现在模式中的图像。如何修改代码以实现此目的这是我的密码： <div id=

我有一个角度控制器，它保存一组图像、url和字符串。目前，我正在使用这个带有ng repeat的控制器来构建一个中继器，该中继器在gallery类型的功能中显示这些图像。我将一个引导模式编码到图像按钮上，一旦单击该按钮，它就会打开模式，以在灯箱模拟中显示图像。所有这些都有效，除了，图像不会出来，除非我叫ng repeat。问题是我在模态中得到了所有的图像（就像ng重复那样忠实）。我的挑战是，我只希望被点击的图像是出现在模式中的图像。如何修改代码以实现此目的

这是我的密码：

<div id="cbp-vm" class="activegrid">
     <ul id="product" class="nav-pills nav-stacked rectangle-list" ng-controller="dataImagesWork">
          <li class="col-md-4 my-gallery-animation-home3" ng-repeat="product in images_work">

               <div class="image-container">
                    <div class="image">
                        <img ng-src="../img/projects/{{product.src}}" alt="{{product.name}}" width="322px" height="182px" />
                    </div>
                    <div class="btn-list">
                         <a class="btn btn-xs btn-primary" data-toggle="modal" data-target="#imgModal"><i class="fa fa-search-plus"></i></a>
                         <a class="btn btn-xs btn-primary pull-right" href="{{product.link}}" target="_blank" rel="nofollow"><i class="fa fa-link"></i></a>
                    </div>
                    <div class="info">
                        <label class="title" href=""> {{product.name}} </label>
                    </div>
              </div>
         </li>
     </ul>
</div>

以及模式：

<div id="imgModal" class="modal fade">
    <div class="modal-dialog" ng-controller="dataImagesWork">
        <div class="modal-content" ng-repeat="product in images_work">
            <div class="modal-body">
                 <img ng-src="../img/projects/{{product.src}}" alt="{{product.name}}" width="322px" height="182px" />
            </div>
        </div>
    </div>
</div>

A给你

谢谢大家!

   <body ng-app="angula">
    <div  ng-controller="dataImagesWork">
    <div id="cbp-vm" class="activegrid">
        <ul id="product" class="nav-pills nav-stacked rectangle-list" >
            <li class="col-md-4 my-gallery-animation-home3" ng-repeat="product in images_work">

                <div class="image-container">
                    <div class="image">
                        <img ng-src="../img/projects/{{product.src}}" alt="{{product.name}}" width="322px" height="182px" />
                    </div>
                    <div class="btn-list">
                        <a class="btn btn-xs btn-primary" ng-click="showModal(product)"><i class="fa fa-search-plus"></i></a>
                        <a class="btn btn-xs btn-primary pull-right" href="{{product.link}}" target="_blank" rel="nofollow"><i class="fa fa-link"></i></a>
                    </div>
                    <div class="info">
                        <label class="title" href=""> {{product.name}} </label>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <div id="imgModal" class="modal fade">
        <div class="modal-dialog" >
            <div class="modal-content">
                <div class="modal-body">
                    <img ng-src="../img/projects/{{productInModal.src}}" alt="{{productInModal.name}}" width="322px" height="182px" />
                </div>
            </div>
        </div>
    </div>
    </div>
</body>

添加ng单击以触发模态。然后在控制器中创建一个临时变量来存储productInModal。单击“显示所选产品的模式”

时，不应直接从控制器使用引导jQuery插件。取而代之的是使用Bootstrap UI服务，它可以平稳地提供模式功能

因此，首先，删除jQuery和bootstrap js标记，您不需要它们。之后，在控制器中实现

viewProduct

功能：

app.controller("dataImagesWork", function($scope, $uibModal) {

    $scope.viewProduct = function(product) {
        $uibModal.open({
            scope: $scope,
            templateUrl: 'path/to/templates/imgModal.html',
            resolve: {product: product},
            controller: function(product, $scope) {
                $scope.product = product;
            }
        });
    };

    // ...
});

并在模板中使用此功能，同时单击

ngClick

：

<a class="btn btn-xs btn-primary" ng-click="viewProduct(product)">
    <i class="fa fa-search-plus"></i>
</a>


不要使用jQuery引导，您有用于此的引导UI。@我会的，但我使用的是引导4。Bootstrap UI基于Bootstrap 3，我认为这是非常糟糕的建议，完全错误的方法。您建议直接从Angular controller使用jQuery，这是一种非常糟糕的做法，有充分的理由。请提供您的理由，如果这是错误的，请否决投票。ThanksI不会拒绝投票，但您永远不应该使用来自controller的直接DOM操作（包括jQuery插件）。原因是:1)。不能保证$（'imgModal'）将可用（取决于HTML结构），但它不可靠。2). 业务层与演示相耦合，这是不好的。还可以看看这个线程：读取控制台（日志）数据正在传输，但图像没有显示：（不知道为什么。另一方面，@dfsq，既然你有不同的想法，你是否愿意提供一个解决方案。我知道你建议使用bootstrap ui，但我在大多数框架功能中使用bootstrap 4。bootstrap ui支持其他功能。我知道我应该选择一个，我会：）谢谢，伙计。我刚刚看到了这个答案。我会让它工作的。它找不到图像，但我相信它会工作的。我应该制作一个imgModal.html视图并在那里添加图像吗？如何？用json？哈！让它与您的代码一起工作，我学到了！好东西！谢谢
app.controller("dataImagesWork", function($scope, $uibModal) {

    $scope.viewProduct = function(product) {
        $uibModal.open({
            scope: $scope,
            templateUrl: 'path/to/templates/imgModal.html',
            resolve: {product: product},
            controller: function(product, $scope) {
                $scope.product = product;
            }
        });
    };

    // ...
});

<a class="btn btn-xs btn-primary" ng-click="viewProduct(product)">
    <i class="fa fa-search-plus"></i>
</a>