使用空元素參數調用角度指令的鏈接函數

我有一個使用空的element參數調用指令的link函數導致錯誤的場景。使用空元素參數調用角度指令的鏈接函數

A碼實施例描述了方案最好：

的index.html：

<html ng-app="app"> 
<body> 
    <div outer></div> 
</body> 
</html>

腳本：

var app = angular.module('app', []); 

app.directive('outer', function() { 
    return { 
     replace: true, 
     controller: function($scope) { 
      $scope.show = true; 
     }, 
     templateUrl: 'partial.html' 
    }; 
}); 

app.directive('inner', function($window) { 
    return { 
     link: function(scope, element, attrs) { 
      console.log('element: ' + element); 
      var top = element[0].offsetTop; 
     } 
    }; 
});

partial.html（由templateUrl上outer引用，同上）：

<div ng-switch on="show"> 
    <div ng-switch-when="true"> 
     <div inner>showing it</div> 
    </div> 
</div>

在Chrome中加載index.html時，控制檯報告錯誤：「TypeError：無法讀取未定義的屬性'offsetTop' - 因爲element是一個空數組！

一些注意事項：

replace必須設置爲true指令outer。
templateUrl必須使用指令outer加載其部分。

我不確定我是否忽視了一些配置要求，或者如果這是一個角度問題。這是一個有效的場景嗎？如果是這樣的話，它是ng-switch的問題，還是Angular內部存在更深層次的問題？

來源

2013-04-03 Paul Pepper

NG-開關似乎調用指令兩次..第一時間元素不指示功能，但它確實第二時間（可能NG-開關的編譯階段）存在。可能不是最好的解決方案，但'如果（element.length）'似乎工作http://plnkr.co/edit/sxfHOarFr5OcFMIt3dRj – charlietfl

我的理解是，編譯階段不調用指令的「鏈接」功能 - 這是正確的？ Re。看守，請看下面我對@ arun-p-johny的迴應。 –

不是100％確定爲什麼......但看看演示中的控制檯日誌記錄。如果運行第三方代碼如jQuery ...如果'element.somePlugin（）'爲空，它將失敗默默無聞 – charlietfl

嘗試

app.directive('inner', function($window) { 
    return { 
     link: function(scope, element, attrs) { 
      console.log('element: ', element); 
      if(!element.length){ 
       console.log('Returning since there is no element'); 
       return; 
      } 
      var top = element[0].offsetTop; 
      console.log('top', top) 
     } 
    }; 
});

來源

2013-04-03 13:43:07

是的，檢查元素會起作用，除了指令'inner'可能是第三方組件。事實上，我遇到了這個問題使用[angular-ui]（http://angular-ui.github.com/）組件。我試圖瞭解角度在做什麼（可能是錯誤的），而不是有效防範這個問題的方法。 –

使用空元素參數調用角度指令的鏈接函數

回答

相關問題