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

Question

我正在尝试使用 Angular/bootstrap 模式来编辑 MVC ApplicationUser 脚手架 View 。我找到了几个例子，它们大多是 jquery。我找到了一个使用 jquery-ui 效果很好的工具。我想与我的模态保持一致，所以我需要让它与 angular-ui 或普通 Bootstrap 一起使用。我不确定这是如何为数据绑定(bind)调用 MVC Controller 的。

工作的 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;
    }

更新

$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 + ")" })

抛出这个错误。

Error: [$parse:syntax] Syntax Error: Token 'bc05f5' is unexpected, expecting [)] at column 12 of the expression [editUser(87bc05f5-35c2-4278-a528-b7e237922d4e)] starting at [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

I am not sure how this is calling the MVC controller for the data binding.

只是给你一些有趣的提示

// 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 版本中进行的所有“数据绑定(bind)”。如您所见，它真的不是什么花哨的东西。

你可能想做一些更优雅的事情，比如为你的 editDialog 或类似的东西设置一个 Angular Directive(指令)。

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

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

此外，您可能需要也可能不需要在 ng-click 内限定 editUser 的范围。