Question

我很好奇角度使用预加载指令的方式，因为我遇到了一个位于<script>标签和 ng-template 中的指令的问题。

当我在chrome dev-tools中暂停执行时，在初始文档加载期间，我可以清楚地看到，如果我的指令位于某个任意模板中，则指令控制器内的代码不会被调用。以下是示例代码，例如 myDirective 作为 myModule .js模块的一部分包含在index.html中，也包含在索引和主app模块中：

这是包含有问题的myDirective

的其他指令的html

<script type="text/ng-template" id="callThis">
  <myDirective></myDirective>
</script>`

我点击这样的ngDialog点击它

ngDialog.open({
  template: 'callThis',
  scope: $scope
});

并且它无法运行该指令，因为它没有任何html可以使用（这就是错误，关于某些html元素缺失）。

最后，这是包含 myDirective

的模块的代码

angular.module('myModule', ['myDirectiveTemplates', 'myDirectiveDirective'])
angular.module('myDirectiveTemplates', []).run(["$templateCache", function($templateCache) {$templateCache.put("myDirectiveTemplate.html","<h1></h1>");}]);
angular.module('myDirectiveDirective', []).directive('myDirective', function ($window, $templateCache) {
  return {
    restrict: 'E', 
    template: $templateCache.get('myDirectiveTemplate.html'),
    controller: function($scope) {
      //some arbitrary code
    }
  };
})

有趣的是，如果我将<my-directive></my-directive>放在index.html文件中，它可以正常工作，并且控制器内的代码会在启动时加载。我不确定如何解决这个问题。

Answer 1

根据我对此问题的理解，您需要使用$ compile服务。这里有一个可能有用的教程：$ compile

本教程中给出的原因是：

＆＃34;新推出的模板尚未获得AngularJS权力然而。这是我们使用$ compile服务的地方......＆＃34;

引自Angular Docs：

将一段HTML字符串或DOM编译成模板并生成一个模板函数，然后可以用于链接范围和模板在一起。

以下是根据教程的简短代码示例：

app.directive('contentItem', function ($compile) {
    /* EDITED FOR BREVITY */

    var linker = function(scope, element, attrs) {
        scope.rootDirectory = 'images/';

        element.html(getTemplate(scope.content.content_type)).show();

        $compile(element.contents())(scope);
    }

    /* EDITED FOR BREVITY */
});

带有模态的ng-template中的Angular指令

1 个答案: