Python燒瓶+角度錯誤：'StoreController未定義'

我的python燒瓶應用程序中有三個文件構建在前端的角js上。Python燒瓶+角度錯誤：'StoreController未定義'

app.py

import json 
    import flask 
    import numpy as np 


    app = flask.Flask(__name__) 


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


    if __name__ == "__main__": 
     import os 

     port = 80 

     # Open a web browser pointing at the app. 
     os.system("open http://localhost:{0}".format(port)) 

     # Set up the development server on port 80. 
     app.debug = True 
     app.run(port=port)

的index.html

<!DOCTYPE html> 
    <html ng-app="gemStore"> 
     <head> 
     <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js'></script> 
     <script type="text/javascript" src="static/app.js"></script> 
     </head> 

     <body ng-controller="StoreController as store"> 
      <div class="list-group-item"> 
        <h3>{{store.product.name}} <em class="pull-right">25</em></h3> 
      </div> 
     </body> 
    </html>

app.js

(function() { 
     var app = angular.module('gemStore', []); 

     app.controller('StoreController', function(){ 
        this.product = gem; 
       } 
    ); 


     var gem = { 
         name: "Chicken", 
         price: 123.11, 
         color: "White" 
        }; 

    })();

當我運行這個應用A n，下列行的存在會導致錯誤：

<h3>{{store.product.name}} <em class="pull-right">25</em></h3>

我得到一個錯誤說。 jinja2.exceptions.UndefinedError UndefinedError：「商店」是未定義

這很奇怪，因爲相同的前端應用程序將正常運行，如果我沒有使用蟒蛇燒瓶服務器。此外，我檢查了HTML文件通過測試警報正確引用app.js文件。

來源

2015-01-02 user3422637

'flask.render_template（「index.html的」）'你需要傳遞參數也 – Hackaholic

哪個參數？ – user3422637

for store.product.name，您在模板中使用 – Hackaholic

明白了。

答案就在這裏： AngularJS-Twig conflict with double curly braces

修改應用程序。JS來

(function() { 
    var app = angular.module('gemStore', []); 

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

    app.controller('StoreController', function(){ 
       this.product = gem; 
      } 
); 


    var gem = 
       { 
        name: "Chicken", 
        price: 123.11, 
        color: "White" 
       } 
    ; 

})();

修改的index.html到：

<!DOCTYPE html> 
<html ng-app="gemStore"> 
    <head> 
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js'></script> 
    <script type="text/javascript" src="static/app.js"></script> 
    </head> 

    <body ng-controller="StoreController as store"> 
     <div class="list-group-item"> 
       <h3>{[{store.product.name}]} <em class="pull-right">25</em></h3> 
     </div> 
    </body> 
</html>

來源

2015-01-03 01:13:36 user3422637

Flask使用Jinja2來呈現HTML模板，該模板與AngularJS類似，使用{{+}}表示通過render_template傳遞的變量。

在這種特殊情況下，您正試圖訪問store.product.name這是AngularJS中的一個變量。但是，由於Jinja2（即Flask）首先處理HTML，它會嘗試將其視爲傳遞給模板渲染器的Flask變量。

如果您希望將HTML打印出來並用{{store.product.name}}作爲AngularJS分析的變量，那麼您需要告訴Jinja2：「嘿，我不希望您將它解析爲Flask變量。」

有幾種不同的方式來做到這一點。

首先，你可以添加{{`}}``爲轉義文本：

<h3>{{ '{{' }}store.product.name{{ '}}' }} <em class="pull-right">25</em></h3>

這將增加{{和}}字符串store.product.name周圍並另外渲染爲{{store.product.name}}

，你可以編寫一個Jinja2過濾器，告訴它不要分析變量並返回原始字符串。例如，燒瓶三角是一個瓶延伸，其包括angularjs濾波器：

http://flask-triangle.readthedocs.org/en/develop/tutorial/part1.html

然而一個可以很容易地寫入自己。

來源

2015-01-03 00:13:07 robodude666

非常感謝。這是超級有用的。但是，當我試圖導入flask.ext.triangle時，我得到一個錯誤，它不存在： ImportError：沒有名爲flask.ext.triangle的模塊我找不到任何資源來下載三角形。 – user3422637

您可以通過點或者手動下載來安裝它。請參閱燒瓶三角形文檔網站上的[安裝]（http://flask-triangle.readthedocs.org/en/develop/installing.html）說明。 – robodude666

該軟件包與您共享的軟件包不同。它們被命名爲相同，並做類似的事情，但不同的文檔此： http://flask-triangle.readthedocs.org/en/latest/glance.html#the-angular-filter 對於這個包，flask.ext。三角形存在但flask.ext.triangle.Triangle不存在。包含此包的角標籤的方式非常冗長，並影響視圖的簡單性。 – user3422637

Python燒瓶+角度錯誤：'StoreController未定義'

回答

相關問題