0

我正在尝试构建一个封装第 3 方库的指令。我的指令可能如下所示：

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(). 问题是我正在使用的 3rd 方库在调用stWidth.addEntry(). 我已经对他们的代码进行了大量分析，他们使用闭包和局部变量来确保我无法更改这些值。

所以我不能对第 3 方库做任何事情，除了重写它，所以我的问题是我可以用 Angular 做什么来延迟调用该stWidget.addEntry()方法，直到我拥有所有的值。还是有一种不必使用该attrs.$observe()方法的绑定形式？

我不在乎绑定更改。在这种情况下，简单的一次绑定就足够了。

4

3 回答 3

1

我认为您需要在链接功能中使用 attrs.$observe 。

请参阅http://docs.angularjs.org/guide/directive#Attributes上的角度指令文档

于 2013-05-11T17:45:45.427 回答
1

使用$timeout应该可以解决问题

angular.module('MyApp').directive("shareButton", [function($timeout) {
    return {
        link: function($scope, elem, attrs ) {
           $timeout(function(){
            stWidget.addEntry({....
           },0);
});
于 2013-03-26T02:47:49.980 回答
1

您可以使用作用域的$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),
       ...
于 2013-03-26T02:59:34.703 回答