gpt4 book ai didi

javascript - AngularJs:在使用 ui 路由器时实现了 IIFE

转载 作者:行者123 更新时间:2023-11-30 15:34:02 25 4
gpt4 key购买 nike

我正在尝试实现 iife 和这种样式以在 angularjs 中分隔我的文件,所以我有 config.js 将使用以这种方式实现的 ui.router

//config.js
(function (module) {
"use strict";
module.config([
"$stateProvider","$urlRouterProvider","$locationProvider",
function ($stateProvider, $urlRouterProvider,$locationProvider) {

$urlRouterProvider.otherwise("/Views/Profile.html");

$stateProvider
.state("profile", {
url: "/",
templateUrl: "Profile.html",
controller: "profileController as vm"
})
.state("profiledetails", {
url: "ProfileDetails",
templateUrl:"ProfileDetails.html",
controller: "profileController as vm"
})

}
])

})(angular.module("appMain", ["ui.grid","ui.router","profileService"]));

我有这个 profile.html,它有一个指向 profiledetail.html 的链接

<!DOCTYPE html>
<html ng-app="appMain">

<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

<link href="../Content/ui-grid.css" rel="stylesheet" />
<link href="../Content/bootstrap.min.css" rel="stylesheet" />

</head>

<body class="container-fluid">
<div ng-controller="profileController">
<div id="profileGrid" ui-grid="gridOptions"></div>
</div>
<script src="../scripts/angular.js"></script>
<script src="../scripts/angular-ui-router.js"></script>

<script src="../scripts/angular-resource.js"></script>
<script src="../scripts/ui-grid.min.js"></script>
<script src="../scripts/App/config.js"></script>
<script src="../scripts/App/Profile/profileService.js"></script>
<script src="../scripts/App/Profile/profileController.js"></script>

<script src="../scripts/App/helper.js"></script>

<a href="#" ui-sref="profiledetails" class="btn btn-primary">profile details</a>
<div ui-view></div>
</body>

</html>

这是我的 profilecontroller.js

   (function(module) {
"use strict";
module.controller("profileController", ["$scope", "profileService", profileController]);

function profileController($scope, profileService) {
var vm = this;
var scope = $scope;
vm.profiles = getProfiles;
var onProfiles = [{
firstName: "Juan",
lastName: "Dela Cruz"
}, {
firstName: "Andres",
lastName: "Cruz"
}];

function getProfiles() {
profileService.getProfiles()
.then(onProfiles(result));
};
scope.gridOptions = {
enableSorting: true,
columnDefs: [{
name: "firstName",
field: "firstName"
}, {
name: "lastName",
field: "lastName"
}],
data: onProfiles
};
}
}(angular.module("appMain")));

在运行代码并点击链接时,chrome 中出现错误,提示“错误:无法从状态‘’解析‘profiledetails’”。不确定我对 iife 的实现是否导致了这个问题。请有人指导我走上正确的道路。

最佳答案

创建 profileController 时不需要重新注入(inject)模块的依赖项,并且 iife 参数应该立即跟在右大括号之后,所以:

})(angular.module("appMain", ["profileService", "ui.grid","ui.router"]));

可以变成:

}(angular.module("appMain")));

这样您就可以检索以前创建的模块,而不是创建一个新模块。查看Creation versus Retrieval文档的一部分以获得关于此的注释。

onProfiles 也是一个数组(不是函数),所以我认为您需要更改它:

function getProfiles() {
profileService.getProfiles()
.then(onProfiles(result));
};

更像这样:

function getProfiles() {
profileService.getProfiles()
.then(function(result){
// do something with the "onProfiles" array here.
});
};

关于javascript - AngularJs:在使用 ui 路由器时实现了 IIFE,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41845918/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com