在Angular JS中創建自定義模塊的一般步驟

我正在嘗試創建一個與ui.bootstrap庫中提供的模塊非常相似的自定義模塊。我希望能夠通過服務打開和關閉它，並通過一些選項。問題在於，我對角度有點新，而且我不完全確定這應該如何完成。在Angular JS中創建自定義模塊的一般步驟

我讀過關於如何創建一個自定義模塊（這是一個偉大的post），我知道我需要一個服務以編程方式打開它，但在查看源代碼我有些迷失。我假設我需要做到以下幾點：

構建一個元素追加到身體
該元素應該有一個指令，將觸發...東西或其他服務？

但是，當我給了一個嘗試，指令並沒有實際上連接。例如：

angular.module("ui.sidePanel", []) 
.service("$sidePanel", function($rootScope, $document){ 
    return{ 
    open: function(options){ 
     angular.element($document[0].body).append("<side-panel></side-panel>"); 
     console.log('Boop'); 
    } 
    } 
}) 
.directive("sidePanel", function(){ 
    return { 
    restrict: "E", 
    link: function(scope, element, attrs){ 
     console.log('Side Panel'); 
    } 
    } 
})

永遠不會記錄「側面板」。

來源

2014-02-25 Nick Fitzpatrick

幾個音符。首先，用一個$前綴命名你自己的東西是個不好的習慣 - 這是保留給角色核心的東西。其次，您很可能不希望繼續追加DOM節點，因爲intead會根據狀態寫入由指令控制的DOM節點和ng-hide/ng-show。最後，在你的例子中，沒有什麼叫$ sidePanel.open（） –

@MattPileggi我想你的權利，我只是想通過ui.bootstrap的例子。你完全正確，我不想繼續附加DOM節點，但是我希望能夠更加優雅一點，然後使用ng-show/ng-hide，因爲我想重複使用這個多個地方。編寫指令可能是最好的方法。 –

只是追加html不足以滿足您的目的，您還需要編譯html（使用$compile）以便它運行該指令。

這就是說，我會建議一種替代方法，服務不操縱dom，因爲這不是一個最佳實踐。

您的服務可以保持模式的狀態，您的指令可以監視並選擇要顯示的內容。我創建了一個你可以玩的fiddle。

服務只適用於模態看

myApp.factory('service', function() { 
    return {  
     value: { 
      data: '' 
     } 
    }; 
});

該指令的作用域該值的價值，所以它知道何時顯示

link: function ($scope, $element, $attrs) { 
    $scope.value = service.value; 
}

現在只要您設定的值服務，指令可以相應調整

編輯：一些ui.bootstrap代碼

他們似乎正在使用服務來獲取模板url並將其作爲內容傳遞給指令。

// In the $modal service 
     function getTemplatePromise(options) { 
     return options.template ? $q.when(options.template) : 
      $http.get(options.templateUrl, {cache: $templateCache}).then(function (result) { 
      return result.data; 
      }); 
     }

如果您正在尋找潛水更多，你可以看看他們的source

希望這有助於！

來源

2014-02-25 20:54:58 hassassin

我記得自己對通過'service'將元素附加到DOM有點反感，但我不知道如果不在模板中粘貼''標記，該怎麼辦。我應該把它吸了起來，並按照你的描述來做，但我仍然很想知道ui.bootstrap是如何做到的。 –

我在關於ui.bootstrap的回答中添加了一點點消息。 – hassassin

在Angular JS中創建自定義模塊的一般步驟

回答

相關問題