定義許多角指令與循環

我有一堆角指令，它們看起來都一樣，像（更復雜的版本）定義許多角指令與循環

app.directive('note', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     template: '<div class="' + 'note' + '"></div> 
    } 
});

與note很多其他的東西所取代。我想在循環中定義它們以保持乾燥。我試過

var dirs = ['note', 'introduction', 'thing']; 

for (var dir, i = 0; dir = dirs[i]; i++) { 
    app.directive(dir, function() { ... }); 
}

無濟於事。有沒有一個好的方法來做到這一點？

來源

2013-07-05 jclancy

爲什麼在循環中的奇怪狀態？爲什麼不只是使用數組的長度，我喜歡平常？我已經看到這樣做的一些組件（實際上使用類似的東西類似於一般的「社交媒體圖標」的東西，它會自動拉動正確的圖標，並建立一個鏈接，這是不完全相同的，因爲我使用屬性但讓我看看它是否會在這裏幫助...我也看到了這個技術在angularjs中的facebook插件包裝。 – shaunhusain

@shaunhusain當我== dirs.length，dir = undefined，並且循環停止。反正使用角度，我更喜歡angular.forEach –

@jtseng是啊我得到它仍然會工作，只是通常看到while循環完成這種條件，並且似乎不必要地混淆使用此for循環檢查長度條件是明確的並且工作得很好 – shaunhusain

我不認爲你應該這樣做。您應該將該值傳遞給指令。然而，如果你真的覺得你需要這樣做，它確實工作正常：fiddle。

HTML：

<div ng-app="myApp"> 

     <div ng-controller="MyCtrl"> 
      Hello, {{name}}! 
     </div> 
     <introduction> </introduction> 
     <note></note> 
     <thing></thing> 
     <notAThing></notAThing> 
    </div>

JS：

var myApp = angular.module('myApp',[]); 

    var dirs = ['note', 'introduction', 'thing']; 

    angular.forEach(dirs, function(dir) { 
     myApp.directive(dir, function() { 
      return { 
       restrict: 'E', 
       transclude: true, 
       template: '<div class="' + dir + '">something</div>' 
      } 
     }); 
    });

來源

2013-07-05 23:10:50

我的第一本能是將價值傳遞給一個指令，但最終我希望我的視圖像一個更加結構化的文檔一樣閱讀，並且'您應該仔細閱讀'看起來比'

You should probably read carefully

'好看。然後我再次對Angular比較陌生。可讀性的好處是否超過了循環指令創建的「不自然」？ – jclancy

@jclancy好吧，創建新的元素*是關於Angular的最特殊功能之一。看到你的榜樣之後，我收回了我所說的關於傳遞價值的觀點。我想我喜歡你更好的方式。 –

我得說，這可能是小白在我說話，但我真的沒有看到這個一個大問題，如果你知道你'重新做：

(function() { 
    var createDirective, module, pluginName, _i, _len, _ref; 

    module = angular.module('FacebookPluginDirectives', []); 

    createDirective = function(name) { 
    return module.directive(name, function() { 
     return { 
     restrict: 'C', 
     link: function(scope, element, attributes) { 
      return typeof FB !== "undefined" && FB !== null ? FB.XFBML.parse(element.parent()[0]) : void 0; 
     } 
     }; 
    }); 
    }; 

    _ref = ['fbActivity', 'fbComments', 'fbFacepile', 'fbLike', 'fbLikeBox', 'fbLiveStream', 'fbLoginButton', 'fbName', 'fbProfilePic', 'fbRecommendations']; 
    for (_i = 0, _len = _ref.length; _i < _len; _i++) { 
    pluginName = _ref[_i]; 
    createDirective(pluginName); 
    } 

}).call(this);

^這不是我的代碼btw只是我拿起來，併爲我工作。這樣做的方式是，如果您將類設置爲數組中的任何值，那麼它將嘗試讓facebook javascript解析節點/元素。

來源

2013-07-05 23:13:39 shaunhusain

在這種情況下，這是什麼？ 'window'？ – jclancy

這段代碼是在它自己的JS文件中，並且沒有包含在其他任何內容中「這指的是全局對象」https：// developer。mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this是的，你是對的 – shaunhusain

啊，謝謝。所以的確如此，「窗口」（或者我猜在節點中它會是「進程」）。 – jclancy

定義許多角指令與循環

回答

相關問題