使用 Angular 将数据传递给 Bootstrap 模式答案

【问题标题】：Passing data to Bootstrap modal using Angular使用 Angular 将数据传递给 Bootstrap 模式
【发布时间】：2016-08-31 17:42:50
【问题描述】：

我知道以前有人问过这个问题，但找不到合适的方法。角度将数据传递到引导模式的最佳实践是什么？

有一个轮播item你可以点击，然后根据item对应的数据弹出一个modal。

代码如下：

HTML：

<div id="winit-slider-1" class="winit-slider" ng-controller="winitCtrl">
    <div class="winit-item text-center" ng-repeat="winit in winits">
        <img src="{{winit.photo}}" class="width-100">
        <h4 class="text-red">{{winit.filled}}</h4>
        <h3>{{winit.title}}</h3>
        <a href="#" class="btn btn-block btn-md btn-winit margin-bot-10">Winit!</a>
        <div class="social-icons">
            <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
            <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
            <a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
            <a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a>
        </div>
    </div>
</div>

app.js

var app = angular.module('winitApp', ["angularModalService"]);
app.controller('winitCtrl', function($scope, ModalService) {
    var winits = [
        {
            id:1, 
            photo:"https://cdnb.lystit.com/photos/1678-2015/11/04/gucci-us-beigeblue-gg-supreme-childrens-gg-supreme-backpack-beige-product-4-168315478-normal.jpeg", 
            filled:"40% Full in 3 Days", 
            title:"Olivia-Burton Women Watch"
        },
        {
            id:2, 
            photo:"http://images.bigcartel.com/product_images/122941467/fin_pegleg_brd2.jpg?auto=format&fit=max&h=1000&w=1000", 
            filled:"80% Full in 2 Days", 
            title:"Super-Cool Fast Skateboard"
        },
        {
            id:3, 
            photo:"http://i01.i.aliimg.com/wsphoto/v0/581102529_1/New-Vintage-Fashion-Gear-Handmade-Genuine-Leather-Strap-Watches-Disc-Diamond-Women-s-Wristband-Watch-Free.jpg", 
            filled:"45% Full in 8 Days", 
            title:"Most-Expensive Watch Ever"
        },
        {
            id:4, 
            photo:"https://cdnb.lystit.com/photos/1678-2015/11/04/gucci-us-beigeblue-gg-supreme-childrens-gg-supreme-backpack-beige-product-4-168315478-normal.jpeg", 
            filled:"40% Full in 3 Days", 
            title:"Olivia-Burton Women Watch"
        },
    ];

    $scope.winits = winits;

    ModalService.showModal({

    })

});

【问题讨论】：

你想传入什么数据？我没有看到任何数据，只有链接，没有 ng-model。
只是图片的网址和标题。我想知道如何根据您单击的项目使模态动态化。有什么想法吗？
您只使用引导程序吗？没有其他角度组件？
您只需要在点击时传递一个模型。我会告诉你如果我能说出模型应该是什么。
如果每个modal只包含标题和点击的item的图片，应该怎么做？

标签： angularjs twitter-bootstrap bootstrap-modal

【解决方案1】：

我知道这不能回答您的问题，但如果可以将其他库添加到您的应用程序。

我建议你包括 Angular ui bootstrap，它有一个用它构建的模式：https://angular-ui.github.io/bootstrap/#/modal

【讨论】：