集成 Angularjs 指令和 3rd 方小部件答案

【问题标题】：Integrating Angularjs directives and 3rd party widgets集成 Angularjs 指令和 3rd 方小部件
【发布时间】：2013-03-26 02:23:22
【问题描述】：

我正在尝试构建一个封装第 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()。问题是我正在使用的第 3 方库在调用 stWidth.addEntry() 后修改这些值的方法绝对为零。我已经对他们的代码进行了大量分析，他们使用闭包和局部变量来确保我无法更改这些值。

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

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

【问题讨论】：

标签： javascript angularjs promise

【解决方案1】：

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

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

【讨论】：

虽然这在技术上是可行的，但因为我在 AngularJS 周围工作，所以感觉很hacky。但这在代码中的副作用比其他建议要少。
会发现这是一个常见的解决方案。只是让浏览器有机会赶上编译过程

【解决方案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),
       ...

【讨论】：

我想使用它，但不幸的是，您必须区分其中一个属性具有需要评估的表达式与硬编码字段的值时。我有一些值是硬编码和变量绑定的情况。所以弄清楚这一点很棘手，所以我最终没有使用这种技术。

【解决方案3】：

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

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

【讨论】：