Question

<!DOCTYPE html>
<html ng-app = "" ng-controller = "myController">
	<head>
		<title>YouToDo</title>
		<script src="lib/angular/angular.min.js"></script>
	</head>
	<body>
		<input type = "text" maxlength = "256" width = "256" ng-model = "task"><br><br>
		<input type = "button" value = "Add" ng-click = "addTask()"><br><br>
		<table border = "0">
			<tr></tr>
		</table>
		<script>
			function myController($scope) {
    			$scope.addTask = function() {
     				var myEl = angular.element( document.querySelector( 'tr' ) );
     				myEl.prepend('<tr><td>' + $scope.task + '</td></tr>');     
    			}
			}
		</script>
		
	</body>
</html>

它适用于W3Schools编辑器，但不适用于任何浏览器！在Chrome和Firefox上都没有。我有AngularJS 1.5.6。请帮忙。

Answer 1

可能有几个问题

您未正确加载angular框架
ng-app = ""为空。它应该有一个名称，需要在您的应用程序中实例化角度框架
angular.module('name you provided in ng-app',[])丢失了。还需要使用应用程序启动角度。
另请查看如何撰写controller

Answer 2

您无法直接在浏览器中运行角度，您需要在本地拥有该库。

请观看此视频，以帮助您设置环境。它真的帮助了我，还有一些推荐的工具来处理角度应用的不同方面。

https://www.youtube.com/watch?v=ofASsumsf7E&list=PLEDbaVSIL58MB78qU6_I_FZZgNe_Mcb5j

Answer 3

为什么我的AngularJS代码不起作用？因为您的lib / angular文件夹中没有angular.min.js文件。但他们的服务器确实如此。

快速解决方案是使用谷歌托管的一个。

替换：

src="lib/angular/angular.min.js"

使用

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"

Answer 4

我觉得你错过了什么。以下是你错过的东西。

Angular modulename
声明角度模块
添加控制器构造函数

<!-- Note that you were using $row3 here -->
<?php if ($now->format('Y-m-d') >= $row5['open_date'] && $now->format('Y-m-d') <= $row5['close_date']): ?>
<form action="manageInputPerwalian.php" method="POST">
    <table align="center">
        <tr>
                <td>MK Code:</td>
                    <td><input type="text" name="mkCode"/></td>
        </tr>
        <tr>
            <td>KP:</td>
            <td><input type="text" name="kp"/></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="SUBMIT"/></td>
        </tr>
</table>
</form>
<?php èndif; ?>


<table border="1" style="width:100%">
<tr>
    <th>MK CODE</th>
            <th>MK NAME</th>
            <th>CLASS</th>
            <?php if ($now->format('Y-m-d') >= $row5['open_date'] && $now->format('Y-m-d') <= $row5['close_date']): ?>
                <th>CANCEL</th>
            <?php endif; ?>
    </tr>
</table>

Answer 5

我觉得你是棱角分明的新手，所以可能会出现一些问题，

您的来源

这条路径确实存在于您的电脑上吗？如果不是，我建议使用像
这样的CDN
尝试更多地搜索您的角度代码，基本的角度代码将是

＆＃13;

angular.module('myApp', []).controller("myCtrl", ['$scope',
  function($scope) {
    $scope.tasks = [];
    $scope.addTask = function (){
       $scope.tasks.push({taskName : $scope.task});
      $scope.task = null;
    };
  }
]);

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Angular JS</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
</head>

<body ng-app="myApp">

  <div ng-controller="myCtrl">
    
    <input type = "text" maxlength = "256" width = "256" ng-model = "task"><br><br>
	<input type = "button" value = "Add" ng-click = "addTask()"><br><br>
    
    <table border = "0">
			<tr ng-repeat = "x in tasks">
              <td>{{x.taskName}}</td>
            </tr>
	</table>
    
  </div>
</body>

</html>

＆＃13;

尝试使用尽可能多的角度，你可以看到我使用了ng-repeat，这是一种更好，更清晰的方式来显示列表。我还建议您使用普通的angular.js文件而不是angular.min.js文件，因为它更容易查看未缩小版本中的错误，它只是用于开发，在发布时只需使用缩小版本版本，因为它下载速度更快。希望你觉得这很有用。

Answer 6

它没有得到angular.min.js文件如果你使用CDN

会更好

https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js

脚本标记

中的

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

Answer 7

简单地替换

<script src="lib/angular/angular.min.js"></script>

与

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

第一个在W3School中工作，因为他们在那个位置有angularjs文件，而你没有。要么这样做，要么更改我在上面显示的src。

<!DOCTYPE html>
<html ng-app="" ng-controller="myController">

<head>
  <title>YouToDo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
  <input type="text" maxlength="256" width="256" ng-model="task">
  <br>
  <br>
  <input type="button" value="Add" ng-click="addTask()">
  <br>
  <br>
  <table border="0">
    <tr></tr>
  </table>
  <script>
    function myController($scope) {
      $scope.addTask = function() {
        var myEl = angular.element(document.querySelector('tr'));
        myEl.prepend('<tr><td>' + $scope.task + '</td></tr>');
      }
    }
  </script>

</body>

</html>

为什么我的AngularJS代码不起作用？它适用于W3Schools编辑器，但不适用于任何浏览器

7 个答案: