如何在angularjs中集成javascript代码答案

【问题标题】：How to integrate javascript code in angularjs如何在angularjs中集成javascript代码
【发布时间】：2018-01-01 10:33:45
【问题描述】：

我是 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. 创建工厂并暴露依赖或创建自定义指令哪个更好？

希望能分享一些关于这个问题的知识。

谢谢..

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

Angular 是双向绑定。因此，您无需在代码中使用 id example1 来扩充任何视图，例如 DIV。

您可以使用 $scope 或 $rootScope 创建范围以反映您的输出。

如果你想使用 document.getElementById("") 来做到这一点，那么最好使用普通的 js 文件而不是 AngularJS 中的控制器。

正如你所问的 :: MultiController in index.html

<!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 代码中的替代方法。
您可以在 Angularjs 中使用 document.getElementById()，但在控制器中操作 HTML 不是一个好习惯。我建议你 create 一个指令并在那里做这种事情。