javascript - Angular 追加 ng-repeat 不起作用

Question

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

<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 is not a function

Answer 1

您应该使用$compile将新添加的元素与当前范围绑定(bind)。

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

<小时/>

对于指令，在定义它的位置注入(inject) $compile (不在链接函数中):

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

引用下面的例子:

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

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