Flask和Angular：在帶有Flask模板的控制器中的作用域

Question

我的最終目標是創建一個具有可排序列的表。我目前正在學習一個教程，並試圖將其應用到我的項目中，但似乎我設置了代碼的方式不適用。我還沒有找到許多與Flask和Angular的用例相交的教程。

我現在遇到的問題是範圍在我定義控制器的地方結束。我需要將由瓶子模板系統定義的項目添加到角度模型中。

我的燒瓶應用程序正在返回由模板系統（Jinja2）使用的json。這是我的html文件。您可以看到，我試圖通過ng-model爲藝術家的每個藝術家定義一個「藝術家」模型。

<div class="artist-table-container" ng-controller="ArtistTableCtrl"> 
<table class="table artist"> 
    <tr> 
     <th class="artist-table-header"></th> 
     <th class="artist-table-header">Artist Name</th> 
     <th class="artist-table-header">Number of Albums Released</th> 
     <th class="artist-table-header">Most Recent Album</th> 
     <th class="artist-table-header">Top Track</th> 
    </tr> 
    {% for artist in artists%} 
    <tr ng-model="artist"> 
     <td><div class="artist-img-sml"><img class="artist-cover-sml" src="imgs/cover.png" height="64" width="64"><img src={{artist.col_img}} height="64" width="64"></div></td> 
     <td>{{artist.name}}</td> 
     <td>{{artist.num_albums}}</td> 
     <td>{{artist.last_album}}</td> 
     <td>{{artist.top_track}}</td> 
    </tr> 
    {% endfor %} 
</table> 
</div> 

明顯的斷開連接似乎是我使用模板而不是ng-repeat的事實。 但是有沒有一種方法可以將這些藝術家html元素添加到模型中，而不是使用ng-repeat？

這裏是我已經定義了我的 「ArtistTableCtrl」 控制器...

/* Controllers */ 
var sweetMusicApp = angular.module('sweetMusicApp', []); 
sweetMusicApp.controller('ArtistTableCtrl', function($scope){ 
    console.log($scope.artist); 
    console.log($scope); 
}); 

和控制檯輸出（unsuprisingly）...

undefined 
b {$$childTail : null, $$childHead: null, $$nextSibling:null, 
    $$watchers: null, $$listeners:Object...} 

Answer 1

首先，你要明白，角的和瓶的模板系統將碰撞因爲兩者都使用相同的插值算子。

所以你需要改變任何一個，我建議客戶的。您可以在app.js做到這一點：

// Changing interpolation start/end symbols. 
    .config(function($interpolateProvider, $httpProvider){   
     $interpolateProvider.startSymbol('[[').endSymbol(']]'); 
    }) 

現在你可以使用角的範圍元素與[[和]]。

其次，你說的是在Angular之前結束的Flask範圍。基本上，Flask模板適用於它的模板，而不是我假設角碼所在的靜態文件。 （如果你有app.js，controllers.js，services.js等）

現在，當你談論將從服務器獲取的一些數據存儲在你的Angular作用域變量中時（這可能來自當模板爲加載），您必須瞭解Angular最適合於REST後端。因此，如果您有可以獲取數據的API，那麼最適合Angular。您可以通過Angular中的簡單GET/POST請求來實現此目的。

雖然，還有一個（髒）的方式來獲得角的瓶模板變量：

定義您的模板輸入隱藏元素瓶負荷：

<input type="hidden" value="{{variable}}" id="var1"/>

現在，你可以具有經由角訪問該元件以這種方式：

$scope.var1 = document.getElementById("var1");

注意：只有當您需要一些僅在頁面呈現請求的上下文中可用的數據時才應使用此選項。理想情況下，你應該有API來獲取這種數據。

Answer 2

它看起來像你混合服務器和Angular客戶端概念。這是我認爲你應該做的：

/* Controllers */ 
var sweetMusicApp = angular.module('sweetMusicApp', []); 
sweetMusicApp.controller('ArtistTableCtrl', function($scope, artistService){ 
    $scope.artists = artistService.fetchArtists(); //service which makes http call to the artists endpoint 
}); 

你的模板應該使用NG-重複：

<div class="artist-table-container" ng-controller="ArtistTableCtrl"> 
<table class="table artist"> 
    <tr> 
     <th class="artist-table-header"></th> 
     <th class="artist-table-header">Artist Name</th> 
     <th class="artist-table-header">Number of Albums Released</th> 
     <th class="artist-table-header">Most Recent Album</th> 
     <th class="artist-table-header">Top Track</th> 
    </tr> 
    <tr ng-repeat="artist in artists"> 
     <td><div class="artist-img-sml"><img class="artist-cover-sml" src="imgs/cover.png" height="64" width="64"><img src={{artist.col_img}} height="64" width="64"></div></td> 
     <td>{{artist.name}}</td> 
     <td>{{artist.num_albums}}</td> 
     <td>{{artist.last_album}}</td> 
     <td>{{artist.top_track}}</td> 
    </tr> 
</table> 
</div>