CODEWITHSUNDEEP
javascripthtmlangularjsionic-framework
Ekoar
Ekoar

Reputation: 481

angular append ng-repeat not working

I'm trying to append a ion-list with ng-repeat into 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>'

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

However ng-repeat are not working, it shows {{item}} after ion-list is appended , anyone know what the problem is?

enter image description here

update code :

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

 }

It give me an error $compile is not a function

Upvotes: 0

Views: 465

Answers (2)

Pengyy
Pengyy

Reputation: 38171

you shall use $compile to bind the newly added elements with the current scope.

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

for directive, inject $compile at the place where you define it (not in link function):

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

refer the below example:

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>

Upvotes: 3

Pritam Banerjee
Pritam Banerjee

Reputation: 18923

The correct format for ion list is:

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

So your code should be like this:

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

Hope this helps.

Upvotes: 0

Related Questions