有没有办法从里面编写的Javascript调用Angular Controller函数<Script> tag in the HTML Page
[英]Is there a way to call Angular Controller function from Javascript written inside <Script> tag in the HTML Page
问题描述
We are working on an application which is functional on angularjs but we decided to use Syncfusion toolbar . 
我们正在开发可在angularjs上运行的应用程序，但我们决定使用Syncfusion工具栏。 We decided to go with Javascript ribbon which is responsive as we had angular option as well. 我们决定使用具有响应能力的Javascript功能区，因为我们也有角度选项。 Now the concern is that We want to use the code already written in controller class but that is not accessible from the function neither can i bind the event to the controllers method. 现在需要担心的是，我们要使用已经在控制器类中编写的代码，但是无法从该函数访问该代码，因此我也无法将该事件绑定到控制器方法。 Please suggest what can be the best way to achieve the functionality. 请提出实现该功能的最佳方法。
Sample is as: 样本为：
HTML Codes script tag is like this 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"
});
});
and the controllers code is like this 控制器代码是这样的
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);
}
Is it possible to use the existing functions defined in controller via the Script in HTML page ? 是否可以通过HTML页面中的脚本使用控制器中定义的现有功能？
2 个解决方案
解决方案1
0 2016-11-25 07:33:13
(if you read my previous answer, sorry, I read your question wrong) （如果您阅读了我以前的答案，对不起，我读错了您的问题）
What I'd suggest is to use a custom event on for instance the window object. 我建议在例如window对象上使用自定义事件。 At the location where you want your controller function to be called do something like this (using jQuery for this example) 在要调用控制器函数的位置执行以下操作（此示例使用jQuery）
<script>
$(window).trigger('mySuperDuperEvent');
</script>
Then in your controller, listen for the event like this: 然后在您的控制器中，监听如下事件：
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!
});
}
});
Just keep the following in mind: 只要记住以下几点：
- Make sure to do your work in the eventhandler in a $scope.$apply() to make sure Angular runs a digest after it's done 确保在$ scope。$ apply（）中的事件处理程序中进行工作，以确保Angular完成后运行摘要
- Make sure to remove the event handler when the controller is removed (by looking at the scope's $destroy event. Otherwise you'll create a slow memory leak by keeping the event handlers there forever. 确保在删除控制器时删除事件处理程序（通过查看作用域的$ destroy事件。否则，通过将事件处理程序永久保留在那里，将会造成缓慢的内存泄漏。
解决方案2
0 2016-11-25 07:39:56
Essentially that long piece of code is DOM manipulation code. 从本质上讲，那段长代码是DOM操作代码。 Directives/components are the part of Angular that deals with that. 指令/组件是Angular处理此问题的部分。 I would suggest putting the code inside a directive. 我建议将代码放入指令中。
Then, in order for the suggested directive/component to have access to the controller function, simply hand over a reference to it. 然后，为了使建议的指令/组件能够访问控制器功能，只需交出对它的引用。 The directive/component can just call the function whenever it needs it. 指令/组件可以在需要时随时调用该函数。 The end usage would be something in your template that looks like: 最终用途将是模板中的内容，如下所示：
<ej-ribbon onsomething="yourFunction"></ej-ribbon>
Read more about directives and components for a bit more detail. 详细了解指令和组件 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
从角度控制器调用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
html标记内的JavaScript函数调用 - JavaScript function call inside the html tag
Javascript：如何从脚本文件中的html页面调用函数 - Javascript : how to call a function from an html page that is in a script file
如何从<script>标签调用javascript函数？ - How to call javascript function from <script> tag?
有条件地从 JavaScript function 调用脚本标签？ - Conditionally call a script tag from a JavaScript function?
调用html内的javascript页面函数 - call javascript page function inside ajaxed html
在javascript函数内调用HTML页面 - Call a html page inside a javascript function
从AngularJS中的控制器在HTML页面上调用函数 - Call function on html page from controller in AngularJS
相关标签