[英]Is there a way to call Angular Controller function from Javascript written inside <Script> tag in the HTML Page
我们正在开发可在angularjs上运行的应用程序，但我们决定使用Syncfusion工具栏。 我们决定使用具有响应能力的Javascript功能区，因为我们也有角度选项。 现在需要担心的是，我们要使用已经在控制器类中编写的代码，但是无法从该函数访问该代码，因此我也无法将该事件绑定到控制器方法。 请提出实现该功能的最佳方法。
样本为：
HTML代码脚本标签是这样的
<script type="text/javascript">
var fontfamily = ["Noto Sans", "Arial", "Times New Roman", "Tahoma", "Helvetica"], fontsize = ["1pt", "2pt", "3pt", "4pt", "5pt"], action1 = ["New", "Clear"], action2 = ["Bold", "Italic", "Underline", "strikethrough", "superscript", "subscript", "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyFull", "Undo", "Redo"];
$(function () {
$("#defaultRibbon").ejRibbon({
width: "100%",
expandPinSettings:{
toolTip: "Collapse the Ribbon"
},
collapsePinSettings:{
toolTip: "Pin the Ribbon"
},
allowResizing:true,
applicationTab: { type: ej.Ribbon.ApplicationTabType.Menu, menuItemID: "ribbonmenu", menuSettings: { openOnClick: false } },
tabs: [{
id: "home", text: "HOME", groups: [{
text: "New", alignType: ej.Ribbon.AlignType.Rows, content: [{
groups: [{
id: "new",
text: "New",
toolTip: "New",
isMobileOnly: true,
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-ribbonnew",
click: "executeAction"
}
},
{
id: "save",
text: "Save",
toolTip: "Save",
isMobileOnly: true,
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-ribbonsave",
click: "executeAction"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 50,
height: 52
}
}]
},
{
text: "Manage", alignType: ej.Ribbon.AlignType.Columns, content: [{
groups: [{
id: "edit",
text: "Edit",
toolTip: "Edit",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-ribbonedit",
click: "onEditClick"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 50,
height: 52
}
},
{
groups: [{
id: "copy",
text: "Copy",
toolTip: "Copy",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribboncopy",
click: "executeAction"
}
},
{
id: "delete",
text: "Delete",
toolTip: "Delete",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribbondelete",
click: "executeAction"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 26,
isBig: false
}
}]
},
{
text: "Change", alignType: ej.Ribbon.AlignType.Columns, content: [{
groups: [{
id: "refresh",
text: "Refresh",
toolTip: "Refresh",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-ribbonrefresh",
click: "executeAction"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 50,
height: 52
}
},
{
groups: [{
id: "undo",
text: "Undo",
toolTip: "Undo",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribbonundo",
click: "executeAction"
}
},
{
id: "redo",
text: "Redo",
toolTip: "Redo",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribbonredo",
click: "executeAction"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 26,
isBig: false
}
}]
},
{
text: "Views", alignType: ej.Ribbon.AlignType.Columns, content: [{
groups: [{
id: "listview",
text: "List View",
toolTip: "List ",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribbonlistview",
click: "executeAction"
}
},
{
id: "cardview",
text: "Card View",
toolTip: "Card View",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribbongridview",
click: "executeAction"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 90,
height: 26,
isBig: false
}
}]
},
{
text: "Navigation", alignType: ej.Ribbon.AlignType.Columns, content: [{
groups: [{
id: "first",
text: "First",
toolTip: "First",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribbonfirst",
click: "executeAction"
}
}, {
id: "previous",
text: "Previous",
toolTip: "Previous",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribbonprevious",
click: "executeAction"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 70,
height: 26,
isBig: false
}
},
{
groups: [{
id: "last",
text: "Last",
toolTip: "Last",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribbonlast",
click: "executeAction"
}
},
{
id: "next",
text: "Next",
toolTip: "Next",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribbonnext",
click: "executeAction"
}
}],
defaults: {
type: ej.Ribbon.Type.Button,
width: 55,
height: 26,
isBig: false
}
}]
},
{
text: "Print", alignType: ej.Ribbon.AlignType.Rows, content: [{
groups: [
{
id: "printpreview",
text: "Preview",
toolTip: "Preview",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-ribbonprintpreview",
click: "executeAction"
}
},
{
id: "print",
text: "Print",
toolTip: "Print",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-ribbonprint",
click: "executeAction"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 50,
height: 52
}
}]
},
{
text: "Import/ Export", alignType: ej.Ribbon.AlignType.Columns, content: [{
groups: [
{
id: "exportasexcel",
text: "Export as Excel",
toolTip: "Export as Excel",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribbonexportasexcel",
click: "executeAction"
}
},
{
id: "importasexcel",
text: "Import as Excel",
toolTip: "Import as Excel",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribbonimportasexcel",
click: "executeAction"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 110,
height: 26,
isBig: false
}
}]
},
{
text: "Favorites", alignType: ej.Ribbon.AlignType.Rows, content: [{
groups: [
{
id: "favorites",
text: "Favorites",
toolTip: "Favorites",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-ribbonFavorites",
click: "executeAction"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 52
}
}]
},
{
text: "Alerts", alignType: ej.Ribbon.AlignType.Rows, content: [{
groups: [
{
id: "notification",
text: "Notification",
toolTip: "Notification",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-ribbonNotification",
click: "executeAction"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 65,
height: 52
}
}]
},
{
text: "", alignType: ej.Ribbon.AlignType.Rows, content: [{
groups: [
{
id: "find",
text: "Find",
toolTip: "Find",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-ribbonfind",
click: "executeAction"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 52
}
}]
},
{
text: "", alignType: ej.Ribbon.AlignType.Rows, content: [{
groups: [
{
id: "design",
text: "Design",
toolTip: "Design",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-ribbonDesign",
click: "executeAction"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 52
}
}]
},
{
text: "", alignType: ej.Ribbon.AlignType.Columns, content: [{
groups: [
{
id: "logout",
text: "Logout",
toolTip: "Logout",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-ribbonlogout",
click: "executeAction"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 60,
height: 52
}
},
{
groups: [{
id: "preferences",
text: "Preferences",
toolTip: "Preferences",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribbonpreferences",
click: "executeAction"
}
},
{
id: "help",
text: "Help",
toolTip: "Help",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
prefixIcon: "e-icon e-ribbon e-ribbonhelp",
click: "executeAction"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 80,
isBig: false
}
}
]
}
//{
// text: "View", alignType: ej.Ribbon.AlignType.Rows, content: [{
// groups: [{
// id: "zoomin",
// text: "Zoom In",
// toolTip: "Zoom In",
// width: 58,
// buttonSettings: {
// contentType: ej.ContentType.TextAndImage,
// imagePosition: ej.ImagePosition.ImageTop,
// prefixIcon: "e-icon e-ribbon e-zoomin",
// click: "executeAction"
// }
// },
// {
// id: "zoomout",
// text: "Zoom Out",
// toolTip: "Zoom Out",
// width: 70,
// buttonSettings: {
// contentType: ej.ContentType.TextAndImage,
// imagePosition: ej.ImagePosition.ImageTop,
// prefixIcon: "e-icon e-ribbon e-zoomout",
// click: "executeAction"
// }
// },
// {
// id: "fullscreen",
// text: "Full Screen",
// toolTip: "Full Screen",
// width: 73,
// buttonSettings: {
// contentType: ej.ContentType.TextAndImage,
// imagePosition: ej.ImagePosition.ImageTop,
// prefixIcon: "e-icon e-ribbon e-fullscreen",
// click: "executeAction"
// }
// }
// ],
// defaults: {
// type: ej.Ribbon.Type.Button,
// height: 70
// }
// }]
//}]
]
}
,
{
id: "actions", text: "ACTIONS", groups: [{
text: "Tables", alignType: ej.Ribbon.AlignType.Columns, content: [{
groups: [{
id: "tables",
text: "Tables",
isMobileOnly: true,
toolTip: "Tables",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-table",
click: "executeAction"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 50,
height: 55
}
}]
},
{
text: "Save", alignType: ej.Ribbon.AlignType.Rows, content: [{
groups: [{
id: "print",
text: "Print",
toolTip: "Print",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-print",
click: "executeAction"
}
},
{
id: "save",
text: "Save",
toolTip: "Save",
buttonSettings: {
contentType: ej.ContentType.TextAndImage,
imagePosition: ej.ImagePosition.ImageTop,
prefixIcon: "e-icon e-ribbon e-save",
click: "executeAction"
}
}
],
defaults: {
type: ej.Ribbon.Type.Button,
width: 50,
height: 55
}
}]
}
]
}
],
create:"createControl"
});
});
控制器代码是这样的
function _controller($scope, $state, toolbarService, cxsToolbarButtons) {
$scope.isShowNav = false;
$scope.$watchCollection(toolbarService.getEnabledButtons, _updateButtons, true);
$scope.toolboxButtons = [{
id: cxsToolbarButtons.copy,
enabled: false,
icon: "icon-copy",
onClick: _copy,
title: "Copy"
},{
id: cxsToolbarButtons.edit,
enabled: false,
icon: "icon-edit",
onClick: _edit,
title: "Edit"
}];
function _edit() {
$scope.notify(cxsToolbarButtons.edit);
}
是否可以通过HTML页面中的脚本使用控制器中定义的现有功能？
（如果您阅读了我以前的答案，对不起，我读错了您的问题）
我建议在例如window对象上使用自定义事件。 在要调用控制器函数的位置执行以下操作（此示例使用jQuery）
<script>
$(window).trigger('mySuperDuperEvent');
</script>
然后在您的控制器中，监听如下事件：
angular.module('app').controller('myController', function($scope) {
$(window).on('mySuperDuperEvent', eventHandler);
$scope.$on('$destroy', function() {
$(window).off('mySuperDuperEvent', eventHandler);
});
function eventHandler() {
$scope.$apply(function() {
// Handle event here!
});
}
});
只要记住以下几点：
从角度控制器调用html脚本标签中定义的javascript函数
[英]calling javascript function defined in html script tag from angular controller
在JavaScript脚本中将img HTML标记与对C＃函数的调用相结合添加到ASP.NET页面
[英]Adding an img HTML tag combined with a call to C# function to an ASP.NET page inside JavaScript script
javascript-从直接在script标签中编写的脚本中导入功能
[英]javascript - import function from within script directly written in the script tag
Javascript：如何从脚本文件中的html页面调用函数
[英]Javascript : how to call a function from an html page that is in a script file
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.