在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中创建自定义模块的一般步骤

回答

相关问题