如何將ui-bootstrap模態結合到我的angular 1.5應用程序中？

我的基本應用程序基本上是一束鮮花（花的圖像），您可以將花添加到花盆..如何將ui-bootstrap模態結合到我的angular 1.5應用程序中？

我試圖將模態納入應用程序，以便如果我點擊花卉照片，模式將顯示一些有關花（名稱，顏色）的信息。

以下是我想到的是：

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>

感謝

來源

2016-07-22 user1354934

您可以通過將數據從模式彈出的決心模態。此後，您需要將該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. 
    } 
    }) 
}

來源

2016-07-22 20:27:05

感謝潘卡。如果你不介意太多，你能解釋一下這個解決方案屬性是如何工作的嗎？謝謝 – user1354934

@ user1354934在解決方案中主要用於模式中，以將某些（數據）傳遞給模態控件，以便它可以處理，當您向控制器內注入值時，控制器可以使用該值。＆你可以利用它來顯示一些負載，直到它完成.. –

謝謝潘卡！我可以再問一個問題嗎，我是新的角度和好奇。在編寫組件時，如何使用$ scope，但在這種情況下，它被使用了？我想從電話貓教程，他們使用'var model = this;' – user1354934

如何將ui-bootstrap模態結合到我的angular 1.5應用程序中？

回答

相關問題