根據點擊按鈕動態添加模態信息

Question

我正在使用AngularUI Modal和AngularUI路由器進行Bootstrap。我想填充模式標題，並根據用戶點擊哪個按鈕來啓動模式，將數據添加到提交的數組中。我可以靜態添加此信息，但無法動態確定如何添加此信息。

[編輯：添加代碼模式下面]

的JavaScript控制器：

myApp.controller('NewProjectCtrl', function ($scope, $location, $stateParams, Projects, $modalInstance) { 
var editProject = this; 
editProject.title = 'Modal 1'; // This title should change based on which button is clicked 
editProject.save = function() { 
editProject.project.type = {type: 'Basic'}; //This item should change based on which button is clicked. 

$modalInstance.close(editProject.selected); 

Projects.$add(editProject.project).then(function(data) {editProject.projects.$save({ type: 'Basic' }); //'Basic' should change based on which button is clicked. 
    }); 
}; 
editProject.cancel = function() { 
$modalInstance.dismiss('cancel'); 
    }; 
}); 

JavaScript進行模態：

.state('selection.new', { 
    url: '/new', 
    onEnter: ['$stateParams', '$state', '$modal', function ($stateParams, $state, $modal) { 
      $modal.open({ 
    templateUrl: 'views/new-mark.html', 
    controller: 'NewProjectCtrl as editProject', 
}) 
    .result.finally(function() { 
    $state.go('^'); 
    }); 
    }] 
}) 

HTML：

<!-- HTML for button that triggers modal 1 --> 

<a ui-sref="selection.new"> 
    <button type="button" class="btn btn-primary btn-lg" ng-click="open()">Select</button> 
</a> 

<!-- HTML for modal title --> 

<div class="modal-header"> 
    <h3 class="modal-title">{{editProjects.type}}</h3> 
</div> 

Answer 1

你可以定義選項通入模態實例是這樣的：

JS開模：

$modal.open({ 
    templateUrl: 'views/new-mark.html', 
    controller: 'NewProjectCtrl as editProject', 
    resolve: { 
    dialogOptions: function() { 
     return { 
     title: $stateParams.type === 'Basic' ? 'Basic Title' : 'Advanced Title', 
     type: $stateParams.type 
     }; 
    } 
    } 
}) 

然後注入並在你的模態例如控制器使用dialogOptions：

myApp.controller('NewProjectCtrl', function ($scope, $location, $stateParams, Projects, $modalInstance, dialogOptions) { 
var editProject = this; 
editProject.title = dialogOptions.title; 
editProject.save = function() { 
editProject.project.type = dialogOptions.type; 

棘手的部分是，你使用onEnter打開對話框。 ng-click =「open（）」沒有做任何事情嗎？所以，也許增加一個狀態參數來表示的類型 - 你可以指定UI-S參考如下（將需要更新的狀態定義爲好）：如果你設置的類型爲

<a ui-sref="selection.new({type: 'Basic'})"> 
<a ui-sref="selection.new({type: 'Advanced'})"> 

狀態定義的變化PARAM在狀態：

url: '/new?type',