0

我正在通过 ui-router、Factory 和 Directive 实现逻辑，但出现错误：JavaScript 运行时错误：Angular Js 中的 [$injector:modulerr]。

UI 路由工作正常。

索引.html 文件：

<html><head><title>Employee Management System</title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/app/EmpRecord.js"></script>
<script src="Scripts/app/GetDataService.js"></script>
<script src="Scripts/app/EmpController.js"></script>
<script src="Scripts/app/EmpApp.js"></script></head>
<body ng-app="EmpApp">
<div class="page-header">Employee Management System
</div><div ng-include="'pageContents/menu.html'"></div>

<ui-view></ui-view></body></html>

EmpApp.js

var app = angular.module("EmpApp", ['ui.router']);
app.factory('EmpFact', ['$http', EmpFact])
    .controller('EmpController', ['$scope', 'EmpFact',EmpController])
    .config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
                 .state('home', {
                     templateUrl: '/home.html'
                           })
                 .state('Add', {
                     templateUrl: '/AddEmployee.html'
                 })
                  .state('List', {

                     templateUrl: 'ListEmp.html',
                     controller: 'EmpController'
                 }
                 )

})

.directive('emp-Record', EmpRecord);

ListEmp.html：

<div><div><h3>List of Employees</h3></div>
<div EmpRecord ng-repeat="e in Employees"></div></div>

雇主控制器

<div><div><h3>List of Employees</h3></div>
<div EmpRecord ng-repeat="e in Employees"></div></div>

获取数据服务.js

 var EmpFact = function ($http) {
 var records = {}
  $http.get('http://localhost/EmployeeApi/api/Emp')
            .then(function (response) {
                records= response.data;
            });

    return {
        GetData: function () {
            alert(records);
            return records;
        }
    }       
 }

现在所有错误都消失了，但数据没有出现。

简而言之：控制器：

var EmpController= function ($scope,EmpFact) {

$scope.Employees = EmpFact.GetData();
console.log($scope.Employees);

};

服务：

 var EmpFact = function ($http) {
var records = {}
  $http.get('http://localhost/EmployeeApi/api/Emp')
            .then(function (response) {
            records= response.data;
            });

    return {
        GetData: function () {
            alert(records);
            return records;
        }}}

Àpp.js

app.factory('EmpFact', ['$http', EmpFact])
  .controller('EmpController', ['$scope','EmpFact', EmpController])
.directive('empRecord', function () {
   return {
    template: "<tr><td>{{e.empid}}</td><td>{{e.empName}}</td><td>{{e.empEmail}}</td><td>{{e.empSalary}}</td>"
}});

HTML：

<div>
<div><h3>List of Employees</h3></div>
 <div emp-Record ng-repeat="e in Employees"></div>
</div>
4

2 回答 2

1

好的，正如我在评论中所建议的那样，因为错误意味着您还没有将EmpFact工厂注入EmpController，正在更改

.controller('EmpController', ['$scope', EmpController])

进入：

.controller('EmpController', ['$scope', 'EmpFact', EmpController])

并将其注入控制器功能：

var EmpController = function ($scope, EmpFact) { ... };

使错误消失了，但现在您说“数据不来”。

我建议在您的工厂中进行另一个更改，而不是您当前的代码，试试这个：

var EmpFact = function ($http) {
    return {
        GetData: function () {
            // return a promise which resolve with the actual data returned from the server
            return $http.get('http://localhost/EmployeeApi/api/Emp').then(
                function (response) {
                    // return the actual results, instead of the whole response from the server
                    return response.data;
                }
            );
        }
    }
};

现在，在您的控制器中，您应该能够获得如下数据：

var EmpController = function ($scope, EmpFact) {
    // Call the "GetData" from the factory, which return a promise with the actual results returned from the server
    EmpFact.GetData().then(
        function(data) {
             // in the resolve callback function, save the results data in 
             // any $scope property (I used "$scope.Employees" so it will be 
             // available in the view via {{ Employees | json }})
             $scope.Employees = data;
        }
    );
};

通过返回一个承诺，您可以保证能够处理从异步请求 (AJAX) 返回的结果。您应该能够像这样在视图中使用结果：

 <div emp-Record ng-repeat="e in Employees"></div>

（请注意，上面的 HTML 片段取自此答案下方的评论）

编辑：

查看您的指令，它看起来不像构造表的正确方法。更改emp-Record为emp-record并将其包装在<table>标签中以使其成为有效的 HTML：

<table>
    <tr emp-record ng-repeat="e in Employees"></tr>
</table>

并在您的指令模板中确保关闭行标记（添加</tr>）：

.directive('empRecord', function () {
    return {
        template: "<tr><td>{{e.empid}}</td><td>{{e.empName}}</td><td>{{e.empEmail}}</td><td>{{e.empSalary}}</td></tr>"
    }
});
于 2017-04-16T14:51:40.800 回答
0

感谢 Alon 的帮助，因为我是 Angular 的新手，仅将我的 ASP.NET MVC 代码转换为 HTML5/Angular。

最后我能够解决它。

数据服务/工厂：

 var EmpFact = function ($http) {
    return {
        GetData: function () {
            return $http.get('http://localhost/EmployeeApi/api/Emp');
        }
    }
 }

控制器：

var EmpController = function ($scope, EmpFact) {
//EmpFact.GetData() is a promise.
EmpFact.GetData().then(
    function (result) {

       $scope.Employees= result.data;
    }
    );
}
于 2017-04-16T17:07:54.813 回答