集成Angularjs指令和第三方小部件

Question

我試圖構建一個指令來封裝第三方庫。我的指令可能類似於以下內容：

angular.module('MyApp').directive("shareButton", [function() { 
    return { 
     link: function($scope, elem, attrs) { 
      stWidget.addEntry({ 
       "service": attrs.service, 
       "element": elem[0], 
       "url": attrs.shareUrl, 
       "title": attrs.shareTitle, 
       "type": attrs.type || "chicklet", 
       "text": attrs.displayText || "", 
       "image": attrs.shareImage 
      }); 

     } 
    }; 
} 

而且使用可能是這樣的：

<a href="#" share-button 
      type="chicklet" 
      service="facebook" 
      share-url="{{shareUrl}}" 
      share-title="{{shareTitle}}" 
      share-image="{{shareImage}}"></a> 

問題倒還當您使用{{ someValue }}結合。在指令的鏈接方法調用期間，這些值將作爲null傳遞。要獲得這些值，您必須使用attrs.$observe()。問題是我使用的第三方庫在調用stWidth.addEntry()後絕對沒有辦法修改這些值。我已經完成了大量的代碼分析，他們使用閉包和局部變量來確保我無法更改這些值。

所以我不能做任何關於第三方庫，除了重寫它，所以我的問題是我可以用Angular做什麼，以延遲調用stWidget.addEntry()方法，直到我有所有的值。還是有一種綁定形式，不必使用attrs.$observe()方法？

我不在乎綁定的變化。在這種情況下，簡單的一次性綁定就足夠了。

Answer 1

使用$timeout應該解決的問題

angular.module('MyApp').directive("shareButton", [function($timeout) { 
    return { 
     link: function($scope, elem, attrs) { 
      $timeout(function(){ 
      stWidget.addEntry({.... 
      },0); 
}); 

Answer 2

您可以使用範圍的$eval方法來評估你的鏈接函數內部對$scope屬性：

HTML：

<a href="#" share-button type="chicklet" service="facebook" share-url="shareUrl" 
share-title="shareTitle" share-image="shareImage"> 

指令鏈接功能：

link: function ($scope, elem, attrs) { 
    console.log($scope.$eval(attrs.shareUrl), 
       $scope.$eval(attrs.shareTitle), 
       $scope.$eval(attrs.shareImage)) 
    stWidget.addEntry({ 
     "service": attrs.service, 
     "element": elem[0], 
     "url":  $scope.$eval(attrs.shareUrl), 
     ... 

Answer 3

我認爲你需要在鏈接函數中使用attrs。$ observe。

查看此角指令文件在http://docs.angularjs.org/guide/directive#Attributes