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

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

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 to delay调用

stWidget.addEntry（）

方法可以做些什么。还是有一种绑定形式不必使用

attrs.$observe（）

方法

---

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

使用

$timeout

应该可以解决这个问题

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

---

使用

$timeout

应该可以解决问题

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

您可以使用scope的方法根据链接函数中的

$scope

来评估属性：

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

HTML:

您可以使用scope的方法根据链接函数中的

$scope

来评估属性：

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

HTML:

---

我认为您需要在链接函数中使用attrs.$observe

---

请参阅链接函数中的角度指令文档，我认为您需要在链接函数中使用attrs.$observe

---

请参见位于

的angular Directions文档，尽管这在技术上是可行的，但它感觉很粗糙，因为我正在使用AngularJS。但这在代码中的副作用比其他建议要小。我们会发现这是一个常见的解决方案。只是给了浏览器一个赶上编译过程的机会，虽然这在技术上是可行的，但感觉有点骇人，因为我在使用AngularJS。但这在代码中的副作用比其他建议要小。我们会发现这是一个常见的解决方案。只是给浏览器一个赶上编译过程的机会我想使用这个，但不幸的是，您必须区分一个属性何时有一个需要求值的表达式，以及字段值何时硬编码。我有一些情况，其中的值是硬编码和变量绑定的。所以要弄清楚这一点很难，所以我最终没有使用这种技术。我想使用这种技术，但不幸的是，你必须区分一个属性何时有一个需要求值的表达式，以及字段值何时硬编码。我有一些情况，其中的值是硬编码和变量绑定的。所以要弄清楚这一点很难，所以我最终没有使用这种技术。