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);
});

和控制台输出（不出所料）...

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

Answer 1

首先，您需要了解 Angular 和 Flask 的模板系统会发生冲突，因为它们都使用相同的插值运算符。

所以你需要改变任何一个，我建议客户的。您可以在 app.js 中执行此操作：

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

现在您可以将 Angular 的作用域元素与 [[ 和 ]] 一起使用。

其次，关于 Flask 范围在 Angular 之前结束的说法是正确的。基本上，Flask 模板适用于它的模板，而不是我假设您的角度代码所在的静态文件。 （如果你有 app.js、controllers.js、services.js 等）

现在，当您谈到将从服务器获取的一些数据存储在您的 Angular 范围变量中时（这可能来自加载模板时传递的上下文），您必须了解 Angular 最适合与 REST 后端配合使用。因此，如果您有可以获取数据的 API，那么这对 Angular 最有效。您可以在 Angular 中通过一个简单的 GET/POST 请求来实现这一点。

虽然，还有另一种（肮脏的）方法可以在 Angular 中获取 Flask 模板变量：

在模板中定义 Flask 加载的输入隐藏元素：

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

现在，您可以通过 Angular 以这种方式访问​​该元素：

$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-repeat：

<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>