如何将MVC模型传递给UI-bootstrap模式

Question

我正在尝试使用Angular/bootstrap模式来编辑MVC ApplicationUser脚手架视图.我找到了一些例子,它们大多是jquery.我发现一个使用jquery-ui运行良好.我希望与我的模态保持一致,所以我需要使用angular-ui或plain bootstrap.我不确定这是如何调用MVC控制器进行数据绑定的.

使用Jquery-ui示例

<script type="text/javascript">
$(document).ready(function () {
    $.ajaxSetup({ cache: false });
    $(".editDialog").live("click", function (e) {
        var url = $(this).attr('href');
        $("#dialog-edit").dialog({
            title: 'Edit Customer',
            autoOpen: false,
            resizable: false,
            height: 355,
            width: 400,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(this).load(url);
            },
        });
        $("#dialog-edit").dialog('open');
        return false;
    });
});

 <tbody>
    @foreach (var item in Model)
        {
      <tr>
       <td>
        @Html.DisplayFor(modelItem => item.FullName)
        </td>
       <td>
    @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "editDialog" })|
      @Html.ActionLink("Details", "Details", new { id = item.Id }) |
     </td>
     </tr>
       }
      </tbody>

 <div id="dialog-edit" style="display: none"> </div>

以下是我如何使用angular来打开api调用的模态.

 $scope.editLocation = function (id) {
        $scope.close();
        var deferred = $q.defer();
        $http({ method: 'get', url: '/api/Locations/' + id })
                .success(function (model) {
                    deferred.resolve(model);
                    $scope.model = model;
                }).error(function (error) {
                    deferred.reject(error);
                }).then(function () {
                    $modal.open({
                        templateUrl: "EditLocationModal.html",
                        controller: 'ModalInstanceController',
                        resolve: {
                            model: function () {
                                return $scope.model;
                            }
                        }
                    });
                })
        return deferred.promise;
    }

UPDATE

$scope.editUser = function (id) {

            $modal.open({
                templateUrl: "Modals/ApplicationUserModal.html",
                controller: 'ModalInstanceController',
                resolve: {
                    model: function () {
                        return $scope.model;
                    }
                }
            });
        };

视图

 <div class="card-body card-padding" ng-controller="ApplicationUserController">
  <div class="table-responsive">
    <table class="table table-striped table-vmiddle">
      <thead>
       <tr>
         <th>Full Name</th>
       </tr>
      </thead>
      <tbody>
         @foreach (var item in Model)
             {
               <tr>
                <td>
                 @Html.DisplayFor(modelItem => item.FullName)
                </td>
                <td>
                @Html.ActionLink("Edit", "Edit", null, new { ng_click = "editUser(item.Id)" })
                </td>
               </tr>
             }
      </tbody>
     </table>
    </div>
  </div>

更新2此语法

 @Html.ActionLink("Edit", "Edit", null, new { ng_click = "editUser(" + item.Id + ")" })

抛出这个错误.

错误:[$ parse:syntax]语法错误:表达式[editUser(87bc05f5-35c2-4278-a528-b7e237922d4e)]第12列的令牌'bc05f5'是意外的,期待[)],从[bc05f5-35c2-4278开始] -a528-b7e237922d4e)]. http://errors.angularjs.org/1.3.15/ $ parse/syntax？p0 = bc05f5&p1 = is%20unexpected%2C%20expecting%20%5B)%5D&p2 = 12&p3 = editUser(87bc05f5-35c2-4278-a528- b7e237922d4e)P4 = bc05f5-35c2-4278-a528-b7e237922d4e)

Answer 1

我不确定这是如何调用MVC控制器进行数据绑定的.

只是为了让你知道有趣的部分

// 1. here it binds a "click" event to all elements with class "editDialog"
$(".editDialog").live("click", function (e) { 
    // 2. here it fetches the HREF attribute of that element
    var url = $(this).attr('href');
    $("#dialog-edit").dialog({
        title: 'Edit Customer',
        autoOpen: false,
        resizable: false,
        height: 355,
        width: 400,
        show: { effect: 'drop', direction: "up" },
        modal: true,
        draggable: true,
        open: function (event, ui) {
            // 3. And here it loads that HREF attribute in the modal
            $(this).load(url);
        },
    });
    $("#dialog-edit").dialog('open');
    return false;
});

这基本上都是jquery版本中的所有"数据绑定".你可以看到它真的没什么特别的.

你可能想做一些更优雅的事情,比如为你editDialog或某些人设置一个角度指令.

编辑:
我重新阅读你如何初始化你的模态,如果我理解正确你应该能够做这样的事情(不是剃须精通足够100%的语法,但你明白了)

@Html.ActionLink("Edit", "Edit", 
   new { id = item.Id }, 
   new { ng_click = "editUser('" + @item.Id + "')" })

此外,您可能需要也可能不需要在editUser内部范围内ng-click.