如何在angularjs中集成javascript代码
如何在angularjs中集成javascript代码
提问于 2018-01-01 18:33:46
我是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.创建工厂并公开依赖项和创建自定义指令哪个更好？
希望能分享一些关于这个问题的知识。
谢谢..
回答 1
Stack Overflow用户
发布于 2018-01-01 18:47:13
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48048931
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号