我如何在 angularjs 中使用 javascript 代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43579792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i use javascript code inside angularjs
提问by Deepak Pookkote
I need to run this code in angularjs.
我需要在 angularjs 中运行此代码。
When i try to execute this model function it is not running.
当我尝试执行此模型函数时，它没有运行。
It is not even showing alert or console.
它甚至没有显示警报或控制台。
So what is the way to use this script files in angularjs
那么在angularjs中使用这个脚本文件的方法是什么
Here is my code in example.html
这是我在 example.html 中的代码
<div>
{{sample}}
</div>
<div><button ng-click="name()"></div>
<script>
function name(){
alert("text");
}
</script>
回答by samuelj90
If i understand your requirement correctly,
如果我正确理解您的要求，
You need to execute a separate java-script function.
您需要执行一个单独的 java 脚本函数。
For an angular application it is not a proper way to run javascript out of scope of angular.
对于 angular 应用程序，在 angular 范围之外运行 javascript 不是正确的方法。
any if it is absolutely requried you can try replacing ng-click="name()"with onclick="name()"
任何如果绝对需要，您可以尝试替换ng-click="name()"为onclick="name()"
var app = angular.module("app", []);
app.controller('exampleController', [function() {
this.myFunction = function() {
alert("Iam from angular controller");
}
}]);
function myFunction() {
alert("Iam from javascript");
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="app" ng-controller="exampleController as ctrl">
<button ng-click="ctrl.myFunction()">click me</button>
<button onclick="myFunction()">click me</button>
</div>@Update
@更新
If you want to use a java script library or function or constants in angularjs the my suggested way is to add a factory or service that ensure the library or function or constants but it is not simple as above solution.Here iam adding a snippet based on above solution
如果你想在 angularjs 中使用 java 脚本库或函数或常量，我建议的方法是添加一个工厂或服务来确保库或函数或常量，但它不像上面的解决方案那么简单。 这里我添加了一个基于以上解决方案
There are some advantages of using following approch :-
使用以下方法有一些优点：-
It will add dependency injection proprely which is a basic concept behind angularjs
It will ensure that the external function exist before starting app.
It will add more flexibility and control over the java script function in angular.
- The below snippet will remove the external access of function and secure your application
- This is the best way in which you can add external libraries like jquery loadash or any js libraries to your code
它将适当地添加依赖注入，这是 angularjs 背后的基本概念
它将确保在启动应用程序之前存在外部函数。
它将在 angular 中增加对 java 脚本函数的更多灵活性和控制。
- 以下代码段将删除功能的外部访问并保护您的应用程序
- 这是将外部库（如 jquery loadash 或任何 js 库）添加到代码中的最佳方式
(function() {
function exampleController(myFunction) {
this.myFunction = function() {
alert("Iam from angular controller");
}
this.externalJSFunction = myFunction
};
exampleController.$inject = ['myFunction'];
function myFunctionFactory($window) {
if (!$window.myFunction) {
throw new Error("myFunction is not defined");
}
this.myFunction = $window.myFunction;
/* You can add
$window.myFunction = undefined;
if the function ($window.myFunction) is not required by
some other library or function in window scope
in such cases it gives added security by
restricting access of this from window scope and dis allows modification
*/
return this.myFunction;
}
myFunctionFactory.$inject = ['$window'];
var app = angular.module("app", []);
app.controller('exampleController', exampleController);
app.factory('myFunction', myFunctionFactory);
})();
function myFunction() {
alert("Iam from javascript");
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="app" ng-controller="exampleController as ctrl">
<button ng-click="ctrl.myFunction()">click me For angular Function</button>
<br/>
<button ng-click="ctrl.externalJSFunction()">click me For external JS Function </button>
<br/>
<button onclick="myFunction()">click me for checking exteranl acess </button>
</div>回答by Sa E Chowdary
your code should be like this....
你的代码应该是这样的......
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script >
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name=function(){
alert("text");
}
});
</script>
</head>
<body ng-controller="MainCtrl">
<div>
{{sample}}
</div>
<div><button ng-click="name()">click me</div>
</body>
</html>You need to give angular js cdn first and then a create a module and controller like above
你需要先给 angular js cdn 然后像上面一样创建一个模块和控制器
回答by Zohaib Ijaz
Here is a sample controller.
这是一个示例控制器。
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<button ng-click="name()">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = name;
function name(){
alert("text");
}
});
</script>
</body>
回答by Shohel
You could use a directive, here is an example:
您可以使用指令，这是一个示例：
// in your JS source
// 在你的 JS 源代码中
angular.directive('something', [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
alert('yup');
});
}
};
}]);
// in your HTML file
// 在你的 HTML 文件中
<button type="button" something>Click Me!</button>
This allows you to reuse your various code chunks / functions across your entire project pretty easily.
这使您可以轻松地在整个项目中重用各种代码块/函数。
Another Solution
另一种解决方案
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="exampleController as ctrl">
<button ng-click="ctrl.name()">click me to angular</button>
<button ng-click="name()" class="btn">click me to javascript</button>
<script>
var app = angular.module("app", []);
app.controller('exampleController', [function() {
this.name = function() {
alert("angular text");
}
}]);
//JQuery Lib must be included your project
$(document).on('click', '.btn', function() {
eval($(this).attr('ng-click'));
});
function name() {
alert("javascript text");
}
</script>
</body>
</html>回答by imbond
Create a service layer and glue it inside the controller. Now, you can reuse the created function in multiple controllers.
创建一个服务层并将其粘在控制器内。现在，您可以在多个控制器中重用创建的函数。
For implementation, How can I call javascript function in AngularJS controller?
对于实现， 如何在 AngularJS 控制器中调用 javascript 函数？
I hope this helps!
我希望这有帮助！
回答by Max Crane
You should be able to run any javascript inside of an angular controller inside of a script tag in an html file. Your html file should look something more like this:
您应该能够在 html 文件中的脚本标记内的角度控制器内运行任何 javascript。您的 html 文件应该看起来更像这样：
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="exampleController as ctrl">
<button ng-click="ctrl.name()">click me</button>
</body>
</html>
<script>
var app = angular.module("app", []);
app.controller('exampleController', [function() {
this.name = function(){
alert("text");
}
}]);
</script>
