如何将 ui-bootstrap 模态合并到我的 angular 1.5 应用程序中？

Question

我的基本应用基本上是一束花（花的图像），您可以将花添加到花盆中。

我正在尝试将模态框合并到应用程序中，这样如果我点击一张花卉照片，模态框就会显示一些关于花的信息（名称、颜色）。

我是这样想的：

Click a flower -> model.showDetails(flower) -> display modal template with that flower's name and color

因此，在我的模板中，中继器内部有以下内容：

<img ng-src="{{flower.image}}" ng-click="model.showDetails(flower)">

在我的 component.js 中，我有以下方法，这就是我遇到问题的地方:(

model.showDetails = function(flower) {
  var modalInstance = $uibModal.open({
    templateUrl: "flower-details/flower-details.html",
  })
}

如何将花名和颜色传递到 flower-details.html 中的标记中？

<h1>Flower Information</h1>
<a ng-click="model.dismiss()">X</a>
<div>
  <p>{{model.flower_name}}</p>
  <p>{{model.flower_color}}</p>
</div>

谢谢

Answer 1

您可以将数据从模态弹出窗口的解析传递到模态。此后，您需要将 flower resolve 注入到控制器工厂函数中，您可以通过该函数接收当前花的值。然后在 HTML 上使用变量时，您可以在它们前面加上 modalScope. 以正确引用它们。

代码

model.showDetails = function(flower) {
  var modalInstance = $uibModal.open({
    templateUrl: "flower-details/flower-details.html",
    resolve: {
       flower: function(){
          return flower; //resolve function returning flower.
       }
    },
    controllerAs: 'modalScope',
    controller: function(flower){
       var modalScope = this;
       modalScope.flower = flower; //got the flower from resolve.
    }
  })
}

如何将 ui-bootstrap 模态合并到我的 angular 1.5 应用程序中？

how can I incorporate ui-bootstrap modal in my angular 1.5 app?

javascript

angularjs

angular-ui-bootstrap