我需要在angularjs中運行此代碼。如何在angularjs中使用javascript代碼
當我嘗試執行這個模型功能它沒有運行。
它甚至沒有顯示警報或控制檯。
那麼，什麼是angularjs
這裏使用這個腳本文件的方式是我在example.html的
<div>
{{sample}}
</div>
<div><button ng-click="name()"></div>
<script>
function name(){
alert("text");
}
</script>
如果我正確理解您的要求，
您需要執行一個單獨的Java腳本功能。
對於一個角度的應用程序，它不是一個正確的方式來運行javascript超出角度範圍。
任何如果它是絕對requried你可以嘗試用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>更換ng-click="name()" @Update
如果你想使用Java腳本庫，函數或在angularjs中的常量我建議的方法是添加一個工廠或服務，以確保庫或函數或con如上solution.Here IAM添加片斷基於上述溶液stants但它不是簡單
有使用以下計算策略的一些優點： -
它將添加依賴注入proprely這是一個基本在angularjs後面的概念
它將確保在啓動應用程序之前存在外部函數。
它將增加更多的靈活性和角度的Java腳本功能的控制。
(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;
}
myFunction.$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>你的代碼應該是這樣的....
<!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>你需要給角js cdn第一個然後創建一個模塊和控制器如上
這是一個示例控制器。
<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>
這裏你還使用angularjs語法我需要在angularJs中使用純粹的JavaScript代碼是可能的嗎？ @Zohaib Ijaz –
@DeepakVijay AngularJS是JavaScript。你可以在角度內使用純js。 –
@DeepakVijay Angular是javascript。沒有角度就無法實現角度功能。 –
您應該能夠在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>
你可以使用一個指令，這裏有一個例子：
//你的JS源
angular.directive('something', [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
alert('yup');
});
}
};
}]);
//在HTML文件中
<button type="button" something>Click Me!</button>
這使您可以在您的整個項目重用你的各種代碼塊/功能很容易。
另一種解決方案
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<script data-require="[email protected]*" 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>知道了..（Y）感謝您的幫助@Shohel和謝謝 –
不，這不是我期待answer.i問的方式，有沒有辦法使用Java編寫的腳本代碼可以在角使用JS html文件@Sa E Chowdary –