如何在angularjs中集成javascript代码
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在angularjs中集成javascript代码相关的知识，希望对你有一定的参考价值。
我是AngularJS的新手，我正在尝试使用特定的javascript文件，我试图将其集成到angularJS中。
我的index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://docs.handsontable.com/0.16.1/scripts/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script type="text/javascript"src="https://docs.handsontable.com/0.16.1/bower_components/handsontable/dist/handsontable.full.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/0.16.1/bower_components/handsontable/dist/handsontable.full.min.css">
</head>
<body >
<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders" dragResize></div>
</body>
</html>
我的app.js.
angular.module('myApp',[]).directive('dragResize',function(){
return{
restrict: 'EA',
controller: function($scope, $timeout){
//document.addEventListener("DOMContentLoaded", function() {
var
container = document.getElementById('example1'),
hot;
hot = new Handsontable(container, {
data: Handsontable.helper.createSpreadsheetData(200, 10),
rowHeaders: true,
colHeaders: true,
colWidths: [55, 80, 80, 80, 80, 80, 80],
rowHeights: [50, 40, 100],
manualColumnResize: true,
manualRowResize: true
});
function bindDumpButton() {
if (typeof Handsontable === "undefined") {
return;
}
Handsontable.Dom.addEvent(document.body, 'click', function (e) {
var element = e.target || e.srcElement;
if (element.nodeName == "BUTTON" && element.name == 'dump') {
var name = element.getAttribute('data-dump');
var instance = element.getAttribute('data-instance');
var hot = window[instance];
console.log('data of ' + name, hot.getData());
}
});
}
bindDumpButton();
$timeout(dragResize,0);
//});
}
};
});
我不确定我是否做得对。我试图运行该文件，但它没有显示任何内容。我有几个问题： - 1.如何在index.html中调用控制器？ 2.有更好的方法来嵌入javascript文件吗？ 3.创建工厂并公开依赖项或创建自定义指令哪个更好？
希望分享一些关于这个问题的知识。
谢谢..
答案
Angular是双向绑定。所以你不需要在你的代码中夸大任何带有id example1的DIV视图。
您可以使用$ scope或$ rootScope创建范围以反映输出。
如果你想使用document.getElementById（“”）这样做，那么最好使用普通的js文件而不是AngularJS中的控制器。
正如您在index.html中询问:: MultiController一样
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
First Name:
<input type="text" ng-model="firstName">
<br> Last Name:
<input type="text" ng-model="lastName">
<br>
<br> Full Name: {{firstName + " " + lastName}}
</div>
<div ng-controller="myCtrl2">
First Name:
<input type="text" ng-model="firstName2">
<br> Last Name:
<input type="text" ng-model="lastName2">
<br>
<br> Full Name: {{firstName + " " + lastName}}
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
app.controller('myCtrl2', function($scope) {
$scope.firstName2 = "asdf";
$scope.lastName2 = "asdfdsf";
});
</script>
</body>
</html>以上是关于如何在angularjs中集成javascript代码的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 angularjs 在我的应用程序中集成贝宝标准？