AngularJS：指令NG - 重複不起作用的鏈接功能

我想創建一個指令，最終將是一個「自動完成」，並在表單元素下顯示數據。AngularJS：指令NG - 重複不起作用的鏈接功能

我有一個問題，在插入的html中獲取ng-repeat以顯示它從attr獲取的信息數組。

在指令中我監視attr等待數據填充，一旦它被填充，我將它設置爲指令中的一個變量，並嘗試ng-重複ul html中的數據。即使該變量已填充到指令中，也沒有顯示任何內容。

任何想法爲什麼？我試過做很多事情，我確定這是一個父/子範圍問題，只是不知道我需要改變什麼？我試圖保持隔離的指令範圍，所以我可以重複使用這個指令多次。

Plunker：http://plnkr.co/edit/XoXli0OyRP6xObsDImOe

//Directive 
    function autoComplete($parse, $compile, $timeout) { 
     var directive = { 
      restrict: 'EA', 
     // scope: true, 
      require: '?ngModel', 
      link: link 
     }; 

     return directive; 

     function link(scope, elem, attr, ngModel) { 
      var cdata = []; 

      var modelGet = $parse(attr['ngModel']); 
      var modelSet = modelGet.assign; 


      scope.$watch(function() { 
       return elem.attr('data'); 
      }, function(newVal) { 
       cdata = newVal; 
       console.log(cdata); 
      }); 

      $timeout(function(){ 

       //var ewidth  = elem.outerWidth(); //Doesn't work in Plunker for some reason 
       var ewidth = '100%'; 
       var html  = '<div><ul class="list-group" style="position: absolute; width: '+ewidth+'px;"><li class="list-group-item" ng-repeat="codes in cdata track by $index">{{codes.code}}</li></ul></div>'; 
       elem.after($compile(html)(scope)); 
       scope.$apply(); 
       console.log("DIV has been added"); 
      }); 



      scope.$watch(function() { 
       return modelGet(scope); 
      }, function() { 
       var string = modelGet(scope); 
       if (string != undefined && string.length >= 6) { 
        console.log("Will do something later"); 
       } 

      }); 
     } 
    }

來源

2015-05-14 Speedy059

好吧，我發現了錯誤的組合在這段代碼，使得它不工作。請看下圖：

在你link，cdata不在範圍，所以無法通過HTML
data包含一個數組，而不是一個字符串進行訪問，所以你不能爲data="{{stuff}}"
插值相反，你需要爲$watchattr.data
既然你的範圍添加信息，它應該是使用scope: true

新

可能是這樣吧，請參閱固定plunkr：http://plnkr.co/edit/K9D9h8SYaqNw3uKui1xT?p=preview

來源

2015-05-14 21:36:50 floribon

謝謝，我新我很接近。我還沒有足夠使用AngularJS來理解父/子範圍。 – Speedy059

AngularJS：指令NG - 重複不起作用的鏈接功能

回答

相關問題