Question

我正在开发一个应用程序，我遇到了一个似乎没有很多教程回答的问题。可以查看示例here。

var app = angular.module('test',[])
var box = angular.element(document.querySelector('#box ul'));
var offset = 0;
app.controller('box',function($scope, $compile, $http){
  $scope.add=function(){
    offset+=1;
    box.append($compile('<user-list-item></user-list-item>')($scope));
  }

})

app.directive('userListItem',function($http, $compile){
  return{
    template:'<li ng-repeat="user in users" >{{user.f_name}} {{user.l_name}}</li>',
    restrict:'E',
    controller:function($scope){
      $http.get('http://dev.firepixel.com/high5rn/api/users&limit=1&offset='+offset).success(function(data){
        if(typeof data.output != 'string'){
          $scope.users = data.output;
        
        }
        else{
          alert('end of users')
          $('button').remove()
        }
      })
    }
  }
})

#box{
  min-height:200px;
  border: 1px dashed #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="test">

<div id="box" ng-controller="box">
  <ul>

  </ul>
<button ng-click="add()">add</button>
</div>
</div>

当插入标签并对其进行编译以使其呈现信息时，第一个显示正常，但当我追加另一个时，它用新的替换原始标签，并添加另一个具有相同信息的标签。我该如何解决这个问题？

Answer 1

试试这个：

脚本：

var app = angular.module('test',[])
var box = angular.element(document.querySelector('#box ul'));
var offset = 0;
app.controller('box',function($scope, $compile, $http){
 $scope.users = [];
  $scope.add=function(){
    offset+=1;
    $http.get('http://dev.firepixel.com/high5rn/api/users&limit=1&offset='+offset).success(function(data){
        if(typeof data.output != 'string'){
          $scope.users.push(data.output[0]);     
        }
        else{
          alert('end of users')
          $('button').remove()
        }
      })

  }
})

app.directive('userListItem',function($http, $compile){
  return{
    template:'<li ng-repeat="user in users">{{user.f_name}} {{user.l_name}}</li>',
    scope: {
        users : '=data'
    },
    restrict:'E',
    replace:true,
    controller:function($scope){

    }
  }
})

HTML：

<div ng-app="test">

<div id="box" ng-controller="box">
  <ul>
    <user-list-item data="users"></user-list-item>
  </ul>
<button ng-click="add()">add</button>

</div>
</div>

Answer 2

我认为错误在于您每次向用户数组分配新值而不是推送。

尝试用这个替换你的指令：

app.directive('userListItem',function($http, $compile){
return{
template:'<li ng-repeat="user in users" >{{user.f_name}} {{user.l_name}}</li>',
restrict:'E',
controller:function($scope){
  $http.get('http://dev.firepixel.com/high5rn/api/users&limit=1&offset='+offset).success(function(data){
    if(typeof data.output != 'string'){
      $scope.users.push(data.output);

    }
    else{
      alert('end of users')
      $('button').remove()
        }
      })
    }
  }
})

Answer 3

为所有指令创建新范围：例如this-＆gt;

app.directive('userListItem',function($http, $compile){
  return{
    template:'<li ng-repeat="user in users" >{{user.f_name}} {{user.l_name}}</li>',
    restrict:'E',
    scope:{},
    controller:function($scope){
      $http.get('http://dev.firepixel.com/high5rn/api/users&limit=1&offset='+offset).success(function(data){
        if(typeof data.output != 'string'){
          $scope.users = data.output;


        }
        else{
          alert('end of users')
          $('button').remove()
        }
      })
    }
  }
})

请参阅链接：http://plnkr.co/edit/lBzTmXALihUS2l8qDJib?p=preview

使用带有角度指令的自定义标签似乎可以替换所有自定义标签内容

3 个答案: