Question

我有一个列表，在列表中的每个项目上，我调用一个模态窗口（自定义指令），该窗口应该包含有关该项目的详细信息，但数据不会更改，并且在每个项目中保持相同。请找到以下代码。

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>

<input id="menu" type="checkbox">

<header>
  <a href="javascript:void(0)">
    <label class="fa fa-bars" for="menu"></label>
  </a>
  <a href="javascript:void(0)">
    <i class="fa fa-book"></i>
  </a>
</header>

<div class="navbar">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae vel nihil sed, fuga, ad natus magni beatae! Velit, ducimus unde quis necessitatibus, veniam cum fuga libero neque, fugit dolorem, id!
  </p>
  <a href="javascript:void(0)" class="fr">
    <label for="menu">Close</label>
  </a>
</div>

指令

 angular
.module('Testapp')
.directive('testDirective', function () {
    return {
        restrict: "AE",
        templateUrl: "/Apps/templates/mytem/testdir.html",
        translucent: true,
        scope: {item:'=data'},
        link: function (scope, element, attribute) {
            console.log(scope.sequence);
        }
    };
});

调用模板

 <div class="modal fade" id="modalAddFilters">
   <div class="modal-dialog">
   <div class="modal-content">
   <div class="modal-body tree"> 
  {{item}} 
   </div>
    </div>
    </div>
 </div>

我能够看到数据在DOM中正确加载，但指令模板不会更改数据。

Answer 1

您的代码工作正常，但您忘记用引号忘记ng-repeat。

我认为您没有正确地将数据解析为模态视图。

我根据您的（部分）代码制作了plunk，我添加了一个模态，一切正常。我使用了ui-bootstrap来显示注入重复数据的模态。

使用自定义指令进行ng-repeat数据绑定

1 个答案: