Question

我正在使用AngularJS开展一个小项目。有时，当我加载页面时，AngularJS不会实例化。

我在html标签中调用ng-app，使用头部中的CDN链接到angular，然后在body标签中调用ng-controller。知道发生了什么事吗？

此外 - 由于与Flask的冲突，我将开始/结束符号更改为{[{和}]}。

MCVE示例：这个项目需要python和flask。的 app.py

from flask import *
import os
import json

app = Flask(__name__)

@app.route("/")
def hello():
    return render_template("index.html")

@app.route("/getReducedMatrix/", methods = ["POST"])
def getMatrix():
    entries = request.get_json()
    dict = {"original": entries}
    return json.dumps(dict, sort_keys=True,indent=4, separators=(',', ': '))

if __name__ == ("__main__"):
    app.run(debug=True,host='0.0.0.0',port=int(os.environ.get("PORT", 5001)))

模板/ index.html中

<!DOCTYPE html>
<html ng-app="LinAlgToolkit" lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js" type = "text/javascript"> </script>
<script src="/static/script.js" type="text/javascript"></script>
</head>

<body ng-controller="MainController">
  <button ng-click = "displayMatrix()" type = "button">RREF it!</button>
  <table ng-if = "response != null">
    <tr>
      <th>Original Matrix</th>
    </tr>
    <tr>
      <td id = "matrixMath">{[{response.original}]}</td>
    </tr>
  </table>
</body>
</html>

静态/的script.js

var app = angular.module('LinAlgToolkit', []);

app.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('{[{');
  $interpolateProvider.endSymbol('}]}');
});

app.controller('MainController', function($scope, $http){
  $scope.inputMatrix = [[2,2],[4,5]];
  $scope.error = null;
  $scope.response = null;

  $scope.displayMatrix = function(){
    console.log($scope.inputMatrix);
    $scope.response = null;

    $http.post('/getReducedMatrix/', $scope.inputMatrix)
    .then(function (matrix) {
      console.log(matrix);
      $scope.response = matrix.data;
      console.log($scope.response.original);
    });
  }
});

运行app.py并在浏览器中输入127.0.0.1:5001。你应该看到一个带有“RREF it！”的按钮。 - 单击此按钮，数组应显示在其上方的“原始矩阵”。这是预期的行为。

有时您会看到按钮，其下方有“原始矩阵”和“{[{response.original}]}”。这可以通过按住F5并放手（半秒钟左右）来重现。

角度控制器没有实例化

0 个答案: