角度誤差：無法設置的未定義的或空引用

參見this Code Pen演示該誤差在IE中。用<div> {{item.name}}</div>代替<div>{{item.name}}</div>解決了這個問題。爲什麼？

全部問題

我有一個使用transclude: true一個parent指令。在parent模板中，有一個repeater指令，它通過動態創建ng-repeat並編譯它來跨越內容，從而重複傳輸的內容。

的HTML：

<div ng-app="ieTest"> 
    <parent> 
     <div>{{item.name}}</div> 
    </parent> 
</div>

的parent指令：

.directive('parent', function($timeout) { 
    return { 
    restrict: 'E', 
    controller: function() { 
     var ctrl = this; 

     $timeout(function($timeout) { 
     ctrl.items = [{ 
      name: 'One' 
     }, { 
      name: 'Two' 
     }, { 
      name: 'Three' 
     }];   
     }, 1000); 

     $timeout(function($timeout) { 
     ctrl.items = [{ 
      name: 'Five' 
     }, { 
      name: 'Two' 
     }, { 
      name: 'Three' 
     }, { 
      name: 'Four' 
     }];   
     }, 2000);  
    }, 
    controllerAs: 'ctrl', 
    transclude: true, 
    template: '<section><div repeater></div></section>', 
    link: function() { 
     // This is where fancy stuff happens that is not relevant to the issue 
    } 
    } 
})

的repeater指令：

.directive('repeater', function($compile) { 
    return { 
    restrict: 'A', 
    require: '^parent', 
    link: function(scope, element, attrs, parentCtrl, transclude) { 
     transclude(function(clone) { 
     element.append(clone); 
     }); 

     // Simplified for the test case but this ng-repeat expression is dynamically generated in reality 
     element.attr('ng-repeat', 'item in ctrl.items'); 
     element.removeAttr('repeater'); 

     $compile(element)(scope); 
    } 
    } 
})

問題：

在Internet Explorer中，如果被傳輸的內容類似<div>{{item.name}}</div>那麼將會出現錯誤，並且被傳輸的內容不會被重複/顯示。爲了避免這個錯誤，我發現添加一些總是存在於元素內部的簡單內容（例如<div> {{item.name}}</div>）可以防止發生錯誤。爲什麼是這個，我如何避免它？

我創建了問題here減少的測試用例。如果您在IE10中運行它，您應該注意到在1秒和2秒後沒有任何反應，並且控制檯中會出現TypeError: Unable to set property 'nodeValue' of undefined or null reference 錯誤。但是，如果您用<div> {{item.name}}</div>或<div>X{{item.name}}</div>替代<div>{{item.name}}</div>，那麼它看起來沒有問題。

我想知道如果問題是我不得不刪除repeater屬性並重新編譯repeater指令來創建ng-repeat。也許有更好的方法來實現這一點？

我在IE10和IE11上看到這個問題。

來源

2015-04-17 djskinner

剛剛在IE中遇到了這個問題。雖然我不知道爲什麼會發生，但我確實通過使用ng-bind而不是花括號找到了解決方法。希望這可以幫助。

<div ng-bind='item.name'></div>

來源

2015-08-28 20:19:22

角度誤差：無法設置的未定義的或空引用

回答

相關問題