Question

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

我已经阅读了如何创建自定义模块（这是一个很棒的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');
    }
  }
})

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

Answer 1

只是附加html对你的目的来说还不够，你还需要编译html（用$compile）来运行指令。

话虽如此，我建议采用另一种方法，即服务不会操纵dom，因为这不是最佳做法。

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

该服务只保存模式的值以查看

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

指令范围包含值，因此它知道何时显示

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

现在无论何时设置服务的值，指令都可以相应地调整

编辑：一些ui.bootstrap代码

他们似乎正在使用服务来获取模板网址，并将其作为内容传递给指令。

// 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

希望这有帮助！

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

1 个答案: