我试图在我的网络应用中使用Justin Lao的ui-iconpicker。我需要修改源代码以添加自定义图标集，并且我无法运行自定义.js文件。我使用webpack将所有内容捆绑在一起，并且除了ui-iconpicker之外，我的所有角度组件都正常运行，如果我将其包含在主应用程序中的依赖项中，则会破坏所有内容。
在页面加载时，我在Web控制台中收到此错误：
Uncaught TypeError: Cannot read property 'module' of undefined
at ui-iconpicker.js:57
at umd (ui-iconpicker.js:51)
at Object.<anonymous> (ui-iconpicker.js:55)
at Object.<anonymous> (ui-iconpicker.js:73)
at __webpack_require__ (bootstrap 0000245…:19)
at Object.<anonymous> (scripts.js:28)
at __webpack_require__ (bootstrap 0000245…:19)
at __webpack_exports__.a.n (bootstrap 0000245…:65)
at bootstrap 0000245…:65
(anonymous) @ ui-iconpicker.js:57
umd @ ui-iconpicker.js:51
(anonymous) @ ui-iconpicker.js:55
(anonymous) @ ui-iconpicker.js:73
__webpack_require__ @ bootstrap 0000245…:19
(anonymous) @ scripts.js:28
__webpack_require__ @ bootstrap 0000245…:19
__webpack_exports__.a.n @ bootstrap 0000245…:65
(anonymous) @ bootstrap 0000245…:65
这是我的主要角度文件：
import angular from 'angular';
import ngRoute from 'angular-route';
var app = angular.module('myapp', ['ngRoute', 'myapp.controllers', 'myapp.directives', 'myapp.services']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partials/index',
controller: 'IndexController'
}).otherwise({
redirectTo: '/'
});
}]).config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
angular.module('masterApp', ['myapp', /*'chartJSbubbleChart',*/ 'd3bubbleChart' ]);
angular.module('d3bubbleChart', ['d3bubbleChart.controllers', 'd3bubbleChart.directives', "ui.sortable", "ui.slider" , 'ui-iconpicker']);
我的自定义ui-iconpicker.js文件。我的理解是，我不需要在这里再次包含角度，因为它已在主文件中完成，但问题似乎是角度不适用于ui-iconpicker.js文件。
我真的不明白需求和导入之间的区别，所以清晰度也很好。
//require('angular');
//var angular = require('angular');
import angularbootstrap from 'angular-bootstrap';
var uiBootstrap = require('angular-ui-bootstrap');
require('./ui-bootstrap-tpls.min.js');
//var angularBoostrap = require('angular-bootstrap');
//import 'bootstrap/dist/css/bootstrap.css';
//import angular from 'angular';
//import uibootstrap from 'angular-ui-bootstrap';
(function() {
var umd;
umd = function(root, factory) {
if (typeof define === "function" && (define.amd != null)) {
return define("values/icon-groups-map", ["angular"], factory);
} else {
return factory(root.angular);
}
};
umd(this, function(angular) {
var module;
module = angular.module("ui-iconpicker/values/icon-groups-map", []);
return module.value("iconGroupsMap", {
"bootstrap": {
prefix: "glyphicon glyphicon-",
classes: ["asterisk", "plus", "euro", "minus", "cloud", "envelope", "pencil", "glass", "music", "search", "heart", "star", "star-empty", "user", "film", "th-large", "th", "th-list", "ok", "remove", "zoom-in", "zoom-out", "off", "signal", "cog", "trash", "home", "file", "time", "road", "download-alt", "download", "upload", "inbox", "play-circle", "repeat", "refresh", "list-alt", "lock", "flag", "headphones", "volume-off", "volume-down", "volume-up", "qrcode", "barcode", "tag", "tags", "book", "bookmark", "print", "camera", "font", "bold", "italic", "text-height", "text-width", "align-left", "align-center", "align-right", "align-justify", "list", "indent-left", "indent-right", "facetime-video", "picture", "map-marker", "adjust", "tint", "edit", "share", "check", "move", "step-backward", "fast-backward", "backward", "play", "pause", "stop", "forward", "fast-forward", "step-forward", "eject", "chevron-left", "chevron-right", "plus-sign", "minus-sign", "remove-sign", "ok-sign", "question-sign", "info-sign", "screenshot", "remove-circle", "ok-circle", "ban-circle", "arrow-left", "arrow-right", "arrow-up", "arrow-down", "share-alt", "resize-full", "resize-small", "exclamation-sign", "gift", "leaf", "fire", "eye-open", "eye-close", "warning-sign", "plane", "calendar", "random", "comment", "magnet", "chevron-up", "chevron-down", "retweet", "shopping-cart", "folder-close", "folder-open", "resize-vertical", "resize-horizontal", "hdd", "bullhorn", "bell", "certificate", "thumbs-up", "thumbs-down", "hand-right", "hand-left", "hand-up", "hand-down", "circle-arrow-right", "circle-arrow-left", "circle-arrow-up", "circle-arrow-down", "globe", "wrench", "tasks", "filter", "briefcase", "fullscreen", "dashboard", "paperclip", "heart-empty", "link", "phone", "pushpin", "usd", "gbp", "sort", "sort-by-alphabet", "sort-by-alphabet-alt", "sort-by-order", "sort-by-order-alt", "sort-by-attributes", "sort-by-attributes-alt", "unchecked", "expand", "collapse-down", "collapse-up", "log-in", "flash", "log-out", "new-window", "record", "save", "open", "saved", "import", "export", "send", "floppy-disk", "floppy-saved", "floppy-remove", "floppy-save", "floppy-open", "credit-card", "transfer", "cutlery", "header", "compressed", "earphone", "phone-alt", "tower", "stats", "sd-video", "hd-video", "subtitles", "sound-stereo", "sound-dolby", "sound-5-1", "sound-6-1", "sound-7-1", "copyright-mark", "registration-mark", "cloud-download", "cloud-upload", "tree-conifer", "tree-deciduous"]
},
"font-awesome": {
prefix: "fa fa-lg fa-",
classes: ["glass", "music", "search", "envelope-o", "heart", "star", "star-o", "user", "film", "th-large", "th", "th-list", "check", "times", "search-plus", "search-minus", "power-off", "signal", "gear", "cog", "trash-o", "home", "file-o", "clock-o", "road", "download", "arrow-circle-o-down", "arrow-circle-o-up", "inbox", "play-circle-o", "rotate-right", "repeat", "refresh", "list-alt", "lock", "flag", "headphones", "volume-off", "volume-down", "volume-up", "qrcode", "barcode", "tag", "tags", "book", "bookmark", "print", "camera", "font", "bold", "italic", "text-height", "text-width", "align-left", "align-center", "align-right", "align-justify", "list", "dedent", "outdent", "indent", "video-camera", "picture-o", "pencil", "map-marker", "adjust", "tint", "edit", "pencil-square-o", "share-square-o", "check-square-o", "arrows", "step-backward", "fast-backward", "backward", "play", "pause", "stop", "forward", "fast-forward", "step-forward", "eject", "chevron-left", "chevron-right", "plus-circle", "minus-circle", "times-circle", "check-circle", "question-circle", "info-circle", "crosshairs", "times-circle-o", "check-circle-o", "ban", "arrow-left", "arrow-right", "arrow-up", "arrow-down", "mail-forward", "share", "expand", "compress", "plus", "minus", "asterisk", "exclamation-circle", "gift", "leaf", "fire", "eye", "eye-slash", "warning", "exclamation-triangle", "plane", "calendar", "random", "comment", "magnet", "chevron-up", "chevron-down", "retweet", "shopping-cart", "folder", "folder-open", "arrows-v", "arrows-h", "bar-chart-o", "twitter-square", "facebook-square", "camera-retro", "key", "gears", "cogs", "comments", "thumbs-o-up", "thumbs-o-down", "star-half", "heart-o", "sign-out", "linkedin-square", "thumb-tack", "external-link", "sign-in", "trophy", "github-square", "upload", "lemon-o", "phone", "square-o", "bookmark-o", "phone-square", "twitter", "facebook", "github", "unlock", "credit-card", "rss", "hdd-o", "bullhorn", "bell", "certificate", "hand-o-right", "hand-o-left", "hand-o-up", "hand-o-down", "arrow-circle-left", "arrow-circle-right", "arrow-circle-up", "arrow-circle-down", "globe", "wrench", "tasks", "filter", "briefcase", "arrows-alt", "group", "users", "chain", "link", "cloud", "flask", "cut", "scissors", "copy", "files-o", "paperclip", "save", "floppy-o", "square", "bars", "list-ul", "list-ol", "strikethrough", "underline", "table", "magic", "truck", "pinterest", "pinterest-square", "google-plus-square", "google-plus", "money", "caret-down", "caret-up", "caret-left", "caret-right", "columns", "unsorted", "sort", "sort-down", "sort-asc", "sort-up", "sort-desc", "envelope", "linkedin", "rotate-left", "undo", "legal", "gavel", "dashboard", "tachometer", "comment-o", "comments-o", "flash", "bolt", "sitemap", "umbrella", "paste", "clipboard", "lightbulb-o", "exchange", "cloud-download", "cloud-upload", "user-md", "stethoscope", "suitcase", "bell-o", "coffee", "cutlery", "file-text-o", "building-o", "hospital-o", "ambulance", "medkit", "fighter-jet", "beer", "h-square", "plus-square", "angle-double-left", "angle-double-right", "angle-double-up", "angle-double-down", "angle-left", "angle-right", "angle-up", "angle-down", "desktop", "laptop", "tablet", "mobile-phone", "mobile", "circle-o", "quote-left", "quote-right", "spinner", "circle", "mail-reply", "reply", "github-alt", "folder-o", "folder-open-o", "smile-o", "frown-o", "meh-o", "gamepad", "keyboard-o", "flag-o", "flag-checkered", "terminal", "code", "reply-all", "mail-reply-all", "star-half-empty", "star-half-full", "star-half-o", "location-arrow", "crop", "code-fork", "unlink", "chain-broken", "question", "info", "exclamation", "superscript", "subscript", "eraser", "puzzle-piece", "microphone", "microphone-slash", "shield", "calendar-o", "fire-extinguisher", "rocket", "maxcdn", "chevron-circle-left", "chevron-circle-right", "chevron-circle-up", "chevron-circle-down", "html5", "css3", "anchor", "unlock-alt", "bullseye", "ellipsis-h", "ellipsis-v", "rss-square", "play-circle", "ticket", "minus-square", "minus-square-o", "level-up", "level-down", "check-square", "pencil-square", "external-link-square", "share-square", "compass", "toggle-down", "caret-square-o-down", "toggle-up", "caret-square-o-up", "toggle-right", "caret-square-o-right", "euro", "eur", "gbp", "dollar", "usd", "rupee", "inr", "cny", "rmb", "yen", "jpy", "ruble", "rouble", "rub", "won", "krw", "bitcoin", "btc", "file", "file-text", "sort-alpha-asc", "sort-alpha-desc", "sort-amount-asc", "sort-amount-desc", "sort-numeric-asc", "sort-numeric-desc", "thumbs-up", "thumbs-down", "youtube-square", "youtube", "xing", "xing-square", "youtube-play", "dropbox", "stack-overflow", "instagram", "flickr", "adn", "bitbucket", "bitbucket-square", "tumblr", "tumblr-square", "long-arrow-down", "long-arrow-up", "long-arrow-left", "long-arrow-right", "apple", "windows", "android", "linux", "dribbble", "skype", "foursquare", "trello", "female", "male", "gittip", "sun-o", "moon-o", "archive", "bug", "vk", "weibo", "renren", "pagelines", "stack-exchange", "arrow-circle-o-right", "arrow-circle-o-left", "toggle-left", "caret-square-o-left", "dot-circle-o", "wheelchair", "vimeo-square", "turkish-lira", "try", "plus-square-o"]
},
"operators": {
classes: ['lessThan', 'greaterThan', 'lessThanEqual', 'greaterThanEqual', 'equalTo', 'notEqualTo']
}
});
});
}).call(this);
(function() {
var umd;
umd = function(root, factory) {
if (typeof define === "function" && (define.amd != null)) {
return define("services/IconGroupCollection", ["angular", "values/icon-groups-map"], factory);
} else {
return factory(root.angular);
}
};
umd(this, function(angular) {
var module;
module = angular.module("ui-iconpicker/services/IconGroupCollection", ["ui-iconpicker/values/icon-groups-map"]);
return module.factory("IconGroupCollection", [
"iconGroupsMap", function(iconGroupsMap) {
var IconGroupCollection;
return IconGroupCollection = (function() {
function IconGroupCollection(groupIdLiteral) {
if (groupIdLiteral == null) {
groupIdLiteral = "bootstrap";
}
this.iconGroupsMap = {};
this.includeGroups(groupIdLiteral);
}
IconGroupCollection.prototype.filterByGroups = function(groupIdLiteral) {
var group, groupId, groupIds, _ref;
if (groupIdLiteral == null) {
groupIdLiteral = "bootstrap";
}
if (groupIdLiteral !== "all") {
groupIds = groupIdLiteral.split(" ");
_ref = this.iconGroupsMap;
for (groupId in _ref) {
group = _ref[groupId];
if (groupIds.indexOf(groupId) !== -1) {
delete this.iconGroupsMap[groupId];
}
}
}
return this;
};
IconGroupCollection.prototype.includeGroups = function(groupIdLiteral) {
var group, groupId, groupIds;
if (groupIdLiteral == null) {
groupIdLiteral = "bootstrap";
}
groupIds = groupIdLiteral.split(" ");
for (groupId in iconGroupsMap) {
group = iconGroupsMap[groupId];
if (this.iconGroupsMap[groupId] == null) {
if (groupIdLiteral === "all" || groupIds.indexOf(groupId) !== -1) {
this.iconGroupsMap[groupId] = group;
}
}
}
return this;
};
IconGroupCollection.prototype.getClassArray = function() {
var classes, group, iconClass, id, _i, _len, _ref, _ref1;
classes = [];
_ref = this.iconGroupsMap;
for (id in _ref) {
group = _ref[id];
_ref1 = group.classes;
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
iconClass = _ref1[_i];
classes.push(group.prefix + iconClass);
}
}
return classes;
};
return IconGroupCollection;
})();
}
]);
});
}).call(this);
(function() {
var umd;
umd = function(root, factory) {
if (typeof define === "function" && (define.amd != null)) {
return define("templates/iconpicker", ["angular", "angularbootstrap"], factory);
} else {
return factory(root.angular);
}
};
umd(this, function(angular) {
var module;
module = angular.module("ui-iconpicker/templates/iconpicker", ["uibootstrap"]);
return module.run([
"$templateCache", function($templateCache) {
return $templateCache.put("templates/iconpicker.html", "<span class=\"btn-group ui-iconpicker\" ng-class=\"{ disabled: disabled }\">\n <button type=\"button\" class=\"btn btn-default dropdown-toggle\"><i class=\"{{ iconClass }}\"></i><span class=\"caret\"></span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li ng-repeat=\"class in availableIconClasses\">\n <button class=\"btn btn-default\" type=\"button\" ng-click=\"$parent.iconClass = class\"><span class=\"{{ class }}\"></span></button>\n </li>\n </ul>\n <input name=\"{{ name }}\" type=\"hidden\" value=\"{{ iconClass }}\" ng-if=\"name\" />\n</span>");
}
]);
});
}).call(this);
(function() {
var umd;
umd = function(root, factory) {
if (typeof define === "function" && (define.amd != null)) {
return define("directives/ui-iconpicker", ["angular", "services/IconGroupCollection", "templates/iconpicker"], factory);
} else {
return factory(root.angular);
}
};
umd(this, function(angular) {
var module;
module = angular.module("ui-iconpicker/directives/ui-iconpicker", ["ui-iconpicker/services/IconGroupCollection", "ui-iconpicker/templates/iconpicker"]);
return module.directive("uiIconpicker", [
"IconGroupCollection", function(IconGroupCollection) {
return {
replace: true,
restrict: "E",
scope: {
name: "@",
model: "=?ngModel"
},
templateUrl: "templates/iconpicker.html",
link: function($scope, $element, attrs) {
var _ref;
$scope.availableIconClasses = (new IconGroupCollection(attrs.groups)).getClassArray();
$scope.iconClass = (_ref = attrs.value) != null ? _ref : $scope.availableIconClasses[0];
if (attrs.ngModel) {
$scope.model = $scope[attrs.ngModel];
$scope.$watch("iconClass", function() {
return $scope.model = $scope.iconClass;
});
$scope.$watch("model", function() {
return $scope.iconClass = $scope.model;
});
}
$scope.$dropdownButton = $element.find("button").eq(0);
return $scope.disabled = attrs.disabled != null;
}
};
}
]);
});
}).call(this);
(function() {
var umd;
umd = function(root, factory) {
if (typeof define === "function" && (define.amd != null)) {
return define("ui-iconpicker", ["angular", "directives/ui-iconpicker"], factory);
} else {
return factory(root.angular);
}
};
umd(this, function(angular) {
return angular.module("ui-iconpicker", ["ui-iconpicker/directives/ui-iconpicker"]);
});
}).call(this);