Question

我正在开发一个AngularJS - Laravel Web应用程序，我的一个指令中存在一个问题。

问题是我以嵌套的方式使用此指令两次，如：

<new-fc-grid>

  <new-fc-grid>
  </new-fc-grid>

</new-fc-grid>

父母正在完美地工作，但是孩子只是第一次工作，但它不再更新。

让我们有一个最小的例子

指令

angular.module('myApp').directive('newFcGrid',function($http){
return{
    scope:{
      items:'=',
      url:'@?',
      limit:"=?",
      updateGrid:'&'


    },
    link:function(scope,ele,attrs){
        console.log('newGrid scope',scope)
        //defaults
        scope.items=[] 
        scope.limit = scope.limit || 4;

        scope.updateGrid = function () {

            var data ={
                index:scope.index,
                limit:scope.itemsPerPage,       
            }


          $http({
                  url:scope.url,
                  method:scope.method,
                  data:data
          }).success(function (res) {
              scope.items =res.data;
              console.log(scope.items);
          }).error(function (err) {
              console.log(err);
          });
        }


        scope.updateGrid();
    }
})

HTML

<new-fc-grid url='api/articles' items='articles' limit='5'>
 <div ng-repeat='article in articles'></div>
  <new-fc-grid url='api/articles/{{article.id}}/comments' items='comments' limit='10'>
    <div ng-repeat='comment in comments'></div>
  </new-fc-grid>

</new-fc-grid>

问题

当我加载页面时，我会看到所有文章及其相应的评论但是当我接下来的5篇文章时，我看到带有旧评论的新文章内部指令未更新!!

注意

该指令有很多功能和模板选项，但这只是为了用最小的例子来澄清主要问题

在嵌套模式下使用两次Angular Directive

0 个答案: