根据点击按钮动态添加模态信息

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',