Fatal编程技术网
  • angularjs/
  • AngularJS:指令不使用templateUrl

AngularJS:指令不使用templateUrl

angularjs

AngularJS:指令不使用templateUrl,angularjs,Angularjs,我是angular的新手，在过去的一个小时左右的时间里，我一直不知道什么应该是一个简单的指令。非常感谢您的帮助 我相信hello应该出现，但似乎无法让它工作 test.html <html> <head lang="en"> <title>Test</title> </head> <body> <div ng-app="myApp"> <hello&

我是angular的新手，在过去的一个小时左右的时间里，我一直不知道什么应该是一个简单的指令。非常感谢您的帮助

我相信hello应该出现，但似乎无法让它工作

test.html

   <html>
   <head lang="en">
     <title>Test</title>
   </head>
   <body>
    <div ng-app="myApp">
        <hello></hello>
    </div>


    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
    </body>
  </html>
hello.html

<p>Hello</p>
你好

在chrome的“转到网络”选项卡中打开开发工具，查找hello.html的请求，将请求的路径与服务器上hello.html的路径进行比较。将hello.html移到适当的位置或更新templeteUrl，一切正常，只需确保语法正确即可。 不要错过JSON中的逗号

myApp.directive("hello", function() {
  return {
    restrict: 'E',
                 ^
    templateUrl:"hello.html"
  };
})
演示：

如果您在本地测试并使用Google Chrome，那么这将不起作用，因为AngularJS正在对这些html文件进行Ajax调用，但Chrome会错误地阻止这一点：

XMLHttpRequest无法加载跨源的文件：///[filepath…] 请求仅支持协议方案：http、数据、chrome、， chrome扩展、https、chrome扩展资源

您可以通过打开开发人员控制台并查看错误来验证这一点

要解决这个问题，有两种方法：

  • 您可以创建一个简单的web服务器来运行代码。如果您有python，只需运行命令（编辑：从包含index.html的文件夹）：

    python-msimplehttpserver

  • 您可以在Chrome中禁用同源策略：

  • 使用一个Chrome扩展插件，它可以为您实现这一点。我查了一个，这是第一个结果：

    • 打开NodeJS命令propmpt并使用npm安装http服务器安装http服务器

    http服务器是一个简单的零配置命令行http服务器

    安装后，只需在NodeJS命令提示符中使用http server-o即可。

    实际上，我们需要给出templateUrl指令的相对路径。相对路径，完全取决于给定路径的组件文件

    假设您的文件路径类似于-app/hello.html 那么您的templateUrl路径应该是-templateUrl:“./hello.html”

  • 下载Python并将其添加到path环境变量中

  • 在index.html所在的目录中创建一个cmd文件来启动python服务器

    • 2 a）在与index.html相同的根目录中创建新的文本文档

    2b）write-python-msimplehttpserver 8080

    2 c）另存为类型“所有文件”，并使用一些名称，如startServer.cmd

  • 现在，解决AJAX调用失败的方法已经完成。浏览器127.0.0.1:8080/index.html中的Oen
    • 您可以在脚本中导入模板并将其用作“模板”，而不是“模板URL”：

    您可以使用：

    userManagementApp.directive("ngCreateUserForm", function () {
    return {
        templateUrl : '/template/create.html'
    };
});
    在服务器端，必须像静态文件一样提供模板

    在Go中：
    e.Static（“/template”，“/path/to/Static/folder”）
    或

    在httpd配置中：

    Alias /template/ "/path/to/template/folder"
    将
    templateUrl:
    替换为
    template:Hello
    -那么它能工作吗？很抱歉，没有指定，我只使用了模板就可以工作，但我在使用templateUrl时遇到了问题，这正是我想要使用的。简单的Hello只是一个占位符，我猜你的URL是错误的…如果你打开控制台并进入网络选项卡，你应该会看到对
    Hello.html
    的请求，它可能是红色的。尝试此链接这是在android webview中使用angular的情况。该代码可能在Plunker上正常工作，但是，如果我们在本地运行，而不使用本地服务器，则可能会导致跨源问题。 
    userManagementApp.directive("ngCreateUserForm", function () {
    return {
        templateUrl : '/template/create.html'
    };
});

    Alias /template/ "/path/to/template/folder"