Javascript 在Angular JS中创建自定义模块的一般步骤

我正在尝试创建一个自定义模块，它与ui.bootstrap库中提供的模式非常相似。我希望能够通过服务打开和关闭它，并传递一些选项。问题是，我对angular有点陌生，我不完全确定应该怎么做

我读过关于如何创建自定义模块的书（这是一个很好的例子），我知道我需要一个服务来以编程方式打开它，但是在查看了的源代码之后，我有点不知所措。我假设我需要做以下工作：

• 构建一个服务以将元素附加到主体
• 该元素应该有一个将触发。。。什么

但当我尝试这样做时，指令实际上并没有联系起来。例如：

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');
    }
  }
})

angular.module（“ui.sidePanel”，[]）
.service（“$sidePanel”，函数（$rootScope，$document）{
返回{
打开：功能（选项）{
元素（$document[0].body）.append（“”）；
console.log（'Boop'）；
}
}
})
.指令（“侧面板”，函数（）{
返回{
限制：“E”，
链接：函数（范围、元素、属性）{
控制台日志（“侧面板”）；
}
}
})

---

永远不会记录“侧面板”。

仅附加html对于您的目的来说是不够的，您还需要编译html（使用

$compile

）以便它运行指令

// 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;
          });
      }

尽管如此，我还是建议使用另一种方法，即服务不操纵dom，因为这不是最佳实践

您的服务可以保持模态的状态，您的指令可以查看模态并选择要显示的内容。我创造了一个你可以玩的游戏

该服务只是保存了一个值，供modal查看

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;
          });
      }

如果你想投入更多的精力，你可以查看他们的网站

---

希望这有帮助

几张便条。首先，用$prefix来命名你自己的东西是不好的做法——这是为棱角核心的东西保留的。第二，您很可能不想继续追加DOM节点，intead编写由指令控制的DOM节点，ng hide/ng show基于状态。最后，在您的示例中，没有调用$sidePanel.open（）@mattpilleggi我想您是对的，我只是尝试使用ui.bootstrap的示例。你完全正确，我不想继续附加DOM节点，但我希望有比ng show/ng hide更优雅的东西，因为我想重用这个多个位置。也许编写一个指令是最好的方法。我记得我对自己通过

服务将元素附加到DOM有点反感，但我不知道如果不在模板中粘贴
标记，该怎么做。我可能应该接受它并按照你所描述的方式去做，但我仍然很想知道ui.bootstrap是如何做到的。我在我的回答中添加了一些关于ui.bootstrap的小贴士。