Question

我有两个简单的文件：leads.html和leadsController.js。我想在leadsController.js中将leads.html作为链接的javaScript文件。当我使用<script src = "leadsController.js"></script>中的以下代码leads.html链接它时，leads.html无法正确呈现。

但是，当我将leadsController.js的内容作为leads.html代码的一部分包含在内时，就可以了。

我没有正确链接.js文件吗？

以下是有效的，什么无效。

我想在连接到leadsController.js

时使用此功能

是的......它在同一目录中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body>

    <div ng-app = "myApp" ng-controller = "myCtrl">

      <h1>Hello, world!</h1>

      <ul>
        <li ng-repeat = "x in myData">{{ x.id }}</li>
      </ul>

    </div>
    <script src = "leadsController.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
  </body>
</html>

leadsController.js看起来像这样：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("https://clearmaze.net/test/newAdmin/leadsData.php").then(function (response) {
      $scope.myData = response.data.records;
  });
});

这有效：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body>

    <div ng-app = "myApp" ng-controller = "myCtrl">

      <h1>Hello, world!</h1>

      <ul>
        <li ng-repeat = "x in myData">{{ x.id }}</li>
      </ul>

    </div>
    <script>

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
      $http.get("leadsData.php").then(function (response) {
          $scope.myData = response.data.records;
      });
    });

    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
  </body>
</html>

Answer 1

尝试脚本文件的绝对uri。例如，如果你的脚本在/ scripts文件夹中 SRC =＆＃34;〜/脚本/ leadsController.js＆＃34;应该工作。

Answer 2

尝试<script src = "./leadsController.js"></script>

Answer 3

更新：拼写错误。我没有将文件上传到服务器... facepalm。感谢大家的建议，因为他们引导我首先解决这个问题。

无法将.js文件绑定到主AngularJS文件

3 个答案: