Javascript 烧瓶和角度：具有烧瓶模板的控制器中的范围

我的最终目标是创建一个具有可排序列的表。我目前正在学习一个教程，并试图将其应用到我的项目中，但我的代码设置方式似乎不起作用。我还没有找到很多与我的用例Flask和Angular相关的教程

我现在遇到的问题是，范围在我定义控制器的地方结束。我需要由flask的模板系统定义的项添加到角度模型中

我的flask应用程序正在返回模板系统（Jinja2）使用的json。这是我的html文件。你可以看到，我试图通过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>
    {% 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>

和控制台输出（不引人注目）

---

看起来您混合了服务器端和客户端的概念。这就是我认为你应该做的：

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

艺人名称
发行的专辑数量
最新专辑
顶轨
{{artist.name}
{{artist.num_albums}
{{艺术家最后一张专辑}
{{artist.top_track}

看起来您混合了服务器端和客户端的概念。这就是我认为你应该做的：

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

艺人名称
发行的专辑数量
最新专辑
顶轨
{{artist.name}
{{artist.num_albums}
{{艺术家最后一张专辑}
{{artist.top_track}

首先，您需要了解Angular和Flask的模板系统将发生碰撞，因为两者使用相同的插值运算符

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

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

现在您可以将Angular的scope元素与

[[

和

]

一起使用

其次，关于烧瓶示波器在Angular's之前结束，您是对的。基本上，Flask模板应用于它的模板，而不是静态文件，我假设您的angular代码位于这些文件中。（如果您有app.js、controllers.js、services.js等）

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

尽管如此，还有另一种（肮脏的）方法可以以角度获取烧瓶模板变量：

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

现在，您可以通过以下方式通过Angular访问此元素：

$scope.var1=document.getElementById（“var1”）

注意：仅当您需要一些仅在页面呈现请求上下文中可用的数据时，才应使用此选项。理想情况下，您应该使用API来获取此类数据。
首先，您需要了解Angular和Flask的模板系统将发生冲突，因为两者使用相同的插值运算符

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

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

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

其次，关于烧瓶示波器在Angular's之前结束，您是对的。基本上，Flask模板应用于它的模板，而不是静态文件，我假设您的angular代码位于这些文件中。（如果您有app.js、controllers.js、services.js等）

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

尽管如此，还有另一种（肮脏的）方法可以以角度获取烧瓶模板变量：

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


现在，您可以通过以下方式通过Angular访问此元素：

$scope.var1=document.getElementById（“var1”）

注意：仅当您需要一些仅在页面呈现请求上下文中可用的数据时，才应使用此选项。理想情况下，您应该使用API获取此类数据。
感谢您的详细回复！这真的帮我把事情弄清楚了。谢谢你的详细回复！这真的帮我把事情弄清楚了。