设置 angular-foundation 以使用带有 angular 的显示模态

Question

所以朋友们，

我正在尝试将 reveal modal 与 angular 一起使用，因为我有数据想根据 ng 创建的 links 的 ng-click 注入到模态中-重复，请允许我展示一些代码：

 <table ng-controller="oflClassCtrl">
  <thead>
    <tr>
      <th>Course Title(Apex/Isis)</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat = "selectedClass in classes | filter:searchTxt">
        <td><a href="#" data-reveal-id="myModal" ng-click="setClass($index)">{{selectedClass.class}}</a></td>

和控制器：

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

oflApp.controller('oflClassCtrl', function ($scope,$http) {

        // $http.get('../courses/coursedata.json');
      $scope.classes = [
    {"class": "ENGLISH I: INTRO TO LITERATURE AND COMPOSITION Sem 2", "href": "../courses/english.php#p1"},
    {"class": "ENGLISH II: CRITICAL READING AND EFFECTIVE WRITING Sem 1"},ect,

$scope.setClass = function(index) {
    $scope.selectedClass = $scope.classes[index];
        };    

});

我已经查看了 http://pineconellc.github.io/angular-foundation/ 但是我不确定我是否只是下载一个文件然后 link 它在头，然后添加一个新模块？

我想做的就是当用户单击将使用 ng-repeat 显示的相关课程时，让我的数据显示在显示模式中。如果我需要 post 它，我也有一个模板布局，但基本上只是想让它呈现 class 信息。

有人可以给我一个如何设置的简单示例吗？谢谢。

Answer 1

如果将模态代码放在 ng-repeat 指令中，则无需将数据注入模态。您只需要使用 ng-attr 动态生成模态本身的 data-reveal-id 和 id 以确保模态中的数据与用户单击的 link 相关联.

笨蛋：http://plnkr.co/edit/RgtaJR?p=preview

在 Angular 中，您可以使用 ng-atrr

轻松设置 ids（以及许多其他属性）

If an attribute with a binding is prefixed with the ngAttr prefix (denormalized as ng-attr-) then during the binding it will be applied to the corresponding unprefixed attribute. This allows you to bind to attributes that would otherwise be eagerly processed by browsers

https://docs.angularjs.org/guide/directive#text-and-attribute-bindings

在 Plunker 中，我向您的 class 对象添加了一个 id 以创建一个我们可以附加到模态的 data-reveal-id 和 id 的唯一标识符。它是附加的而不是前置的 (ng-attr-data-reveal-id="Modal{{class.id}}")，因为 querySelector 不喜欢带有前导整数的 id。看这里：Using querySelector with IDs that are numbers.

这种方法的优点是大大简化了您的控制器，并且很清楚您的模态中包含哪些信息。

希望对您有所帮助。

设置 angular-foundation 以使用带有 angular 的显示模态

setting up angular-foundation to use reveal modal with angular

zurb-foundation

angularjs