Question

我想完成以下几点： 1.单击按钮，使用angular ui打开模式弹出窗口 2.将数据绑定到模态弹出窗口中的控件

enter image description here

AngularFormsApp.js：

var angularFormsApp = angular.module('angularFormsApp', ['ngRoute', 'ui.bootstrap']);

angularFormsApp.config(function ($routeProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "app/Home.html",
            controller: "HomeController"
        })
        .when("/newEmployeeForm", {
            templateUrl: "app/EmployeeForm/efTemplate.html",
            controller: "efController"
        })
        .when("/updateEmployeeForm/:id", {
            templateUrl: "app/EmployeeForm/efTemplateNew.html",
            controller: "efController"
        })
        .otherwise({
            redirectTo: "/home"
        });
});

angularFormsApp.controller("HomeController",
    function ($scope, $location, $modal, DataService) {

        $scope.showCreateEmployeeForm = function () {
            //$location.path('/newEmployeeForm');

            $modal.open({
                templateUrl: 'app/EmployeeForm/efTemplate.html',
                controller: 'efController'
            });

        };

        $scope.showUpdateEmployeeForm = function (id) {
            $location.path('/updateEmployeeForm/' + id)
            //$modal.open({
            //    templateUrl: 'app/EmployeeForm/efTemplate.html/' + id,
            //    controller: 'efController'
            //})
        };

    });

efController.js

angularFormsApp.controller('efController',
    function efController($scope, $window, $routeParams, $modalInstance, DataService) {

        if ($routeParams.id)
            $scope.employee = DataService.getEmployee($routeParams.id);
        else
            $scope.employee = { id: 0 };

        $scope.editableEmployee = angular.copy($scope.employee);

        $scope.departments = [
            "Engineering",
            "Marketing",
            "Finance",
            "Administration"
        ];

        $scope.submitForm = function () {

            if ($scope.editableEmployee.id == 0) {
                // insert new employee
                DataService.insertEmployee($scope.editableEmployee);
            }
            else {
                // update the employee
                DataService.updateEmployee($scope.editableEmployee);
            }

            $scope.employee = angular.copy($scope.editableEmployee);
            //$window.history.back();

            $modalInstance.close();
        };

        $scope.cancelForm = function () {
            //$window.history.back();

            $modalInstance.dismiss();
        };

    });

DataService.js

angularFormsApp.factory('DataService',
    function () {
        var getEmployee = function (id) {
            if (id == 123) {
                return {
                    id: 123,
                    fullName: "Milton Waddams",
                    notes: "The ideal employee.  Just don't touch his red stapler.",
                    department: "Administration",
                    perkCar: true,
                    perkStock: false,
                    perkSixWeeks: true,
                    payrollType: "none"
                };
            }
            return undefined;
        };

        var insertEmployee = function (newEmployee) {
            return true;
        };

        var updateEmployee = function (employee) {
            return true;
        };

        return {
            insertEmployee: insertEmployee,
            updateEmployee: updateEmployee,
            getEmployee: getEmployee
        };
    });

的index.html：

<!DOCTYPE html>
<html ng-app="angularFormsApp">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
    <script src="app/AngularFormsApp.js"></script>
    <script src="app/DataService.js"></script>

    <script src="app/EmployeeForm/efController.js"></script>
    <script src="app/EmployeeForm/efDirective.js"></script>
</head>
<body class="container">
    <h1>Start Page</h1>
    <div ng-view>
    </div>
</body>
</html>

Home.html中：

<input type="button" class="btn btn-primary" value="Add New Employee"
       ng-click="showCreateEmployeeForm()" />
<br/>
<br/>
<input type="button" class="btn btn-primary" value="Update Employee Id: 123"
       ng-click="showUpdateEmployeeForm(123)" />

我想设置$ routeParams.id的值但是在调试时我发现没有设置此值。任何人都可以帮我解决这个问题吗？

Answer 1

如果查看DataService.js，insertEmployee（）函数只是一个不执行任何操作的存根。通常，这会到达数据库并填充员工的新ID。

这是来自我的Pluralsight课程，使用Bootstrap和MVC 5的AngularJS表格。如果你继续观看课程，你将会了解更多相关信息。

就设置$ routeParams.id而言，你不应该在模态对话框中导航和导航。如果继续本课程，您将看到如何使用可用于导航的页面（ng-view）。

Answer 2

在 packages.config 中，

<packages>
  <package id="Angular.UI.Bootstrap" version="0.11.0" targetFramework="net451" />
  <package id="angularjs" version="1.2.18" targetFramework="net451" />
  <package id="bootstrap" version="3.1.1" targetFramework="net451" />
  <package id="jQuery" version="1.9.0" targetFramework="net451" />
</packages>

您需要下载这些确切的软件包版本才能正常运行。

我用你的代码和模型形式完美地运作。如果你愿意，我可以寄给你整个项目包。

如何在更新模式下弹出angular-ui模式打开和绑定数据？

2 个答案: