角度附加重复不起作用

Question

我正在尝试将带有ng-repeat的离子列表附加到元素

中

<ion-list class="search-list" ><li>#</li>'  +
'<li ng-repeat="item in vm.search_list"><a ng-click="scrollTo(item)">{{item}}</a></li>' +
'</ion-list>'

tag.search.directive.js

link: function($scope, $element, $attrs, $ctrl) {
  var ele = $element[0];
  var myElemenet = angular.element($element[0])
  var a = angular.element('<ion-list class="search-list" ><li>#</li>'  +
              '<li ng-repeat="item in vm.search_list"><a ng-click="scrollTo(item)">{{item}}</a></li>' +
              '</ion-list>');
              myElemenet.append(a);
 }

但ng-repeat无法正常工作，在附加了ion-list后会显示{{item}}，有人知道问题是什么吗？

更新代码：

angular.module('main').directive('dtTagSearch', function($window, 
$ionicScrollDelegate) {
return {
scope: {
data: '=data',
},
link: function($scope, $element, $attrs, $ctrl, $compile) {
  var ele = $element[0];
  var myElemenet = angular.element($element[0])
  console.log($scope.data);
  var a = angular.element('<ion-list class="search-list" ><li>#</li>'  +
              '<li ng-repeat="item in vm.search_list"><a ng-
  click="scrollTo(item)">{{item}}</a></li>' +
              '</ion-list>');
              myElemenet.append($compile(a)($scope));

 }

它给我一个错误$ compile不是函数

Answer 1

您应使用$compile将新添加的元素与current scope绑定。

myElemenet.append($compile(a)($scope));

for directive，在您定义它的位置注入$compile（不在链接函数中）：

angular.module('main').directive('dtTagSearch', function($compile, $window, $ionicScrollDelegate) 

参考以下示例：

＆＃13;

＆＃13;

angular.module("app", [])
  .controller("myCtrl", function($scope, $compile) {
    $scope.data = [1,2,3,4];
    var test = angular.element('<div ng-repeat="item in data">{{item}}</div>');
    angular.element('#test').append($compile(test)($scope));
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <div id="test">
    {{data}}
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

离子列表的正确格式为：

<ion-list>
   <ion-item ng-repeat = "item in items">
      Item {{item.id}}
      <ion-reorder-button class = "ion-navicon">
      </ion-reorder-button>
   </ion-item>
</ion-list>

所以你的代码应该是这样的：

<ion-list class="search-list" >
    <li>#</li>
    <li ng-repeat="item in vm.search_list">
         <a ng-click="scrollTo(item)">{{item}}</a>
    </li>
</ion-list>

希望这有帮助。