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 }}绑定时出现问题。在指令上调用link方法期间，这些值将作为null传递。要获得这些值，您必须使用attrs.$observe()。问题是我使用的第三方库在调用stWidth.addEntry()后绝对没有办法修改这些值。我已经完成了大量的代码分析，他们使用闭包和局部变量来确保我无法更改这些值。

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

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

Answer 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),
       ...

Answer 2

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

请参阅http://docs.angularjs.org/guide/directive#Attributes

上的角度指令文档

Answer 3

使用$timeout应解决问题

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

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

3 个答案: