Question

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

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

感谢..

Answer 1

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代码

1 个答案: