角度1.5のアプリにui-bootstrapモーダルを組み込むにはどうしたらいいですか？

Question

私の基本的なアプリは、基本的に花の画像（花の画像）です。花の花瓶に花を追加することができます。

私はアプリにモーダルを取り入れようとしています。花の写真には、花（名前、色）に関する情報が表示されます。ここで

が、私はそれを考えています方法は次のとおりです。

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

だから、私のテンプレートでは、私はリピーターの内部で、次があります。私のcomponent.jsで

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

、私が持っています次の方法、これは私が問題を抱えているところです:(

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. 
    } 
    }) 
}