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解析注入控制器工厂函数，通过该函数可以获得当前花的值。然后在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.
    }
  })
}

如何在我的angular 1.5 app中加入ui-bootstrap模态？

1 个答案: