Question

我试图让一个自定义指令以角度方式工作，部分遵循official document。

在Chrome中，我只看到一个空白页。

F12显示此错误：

XMLHttpRequest cannot load file:///home/jeff/workspace/angularjs-intro/playground/my-customer.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

这是我到目前为止所得到的：

＆＃13;

  (function() {

    var app = angular.module('docsRestrictDirective', []);

    app.controller('Controller', function() {

    });

    app.directive('myCustomer', function() {
      return {
        restrict: 'E',
        templateUrl: 'my-customer.html'
      };
    });
  })();

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-example14-production</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
  <script src="script.js"></script>

</head>

<body ng-app="docsRestrictDirective">
  <div ng-controller="Controller">
    <my-customer></my-customer>
  </div>
</body>

</html>

＆＃13;

my-customer.html

Name: {{customer.name}} Address: {{customer.address}}

感谢任何帮助。

Answer 1

您应该在某个服务器上运行您的代码，就像您在没有服务器的情况下运行一样，浏览器会尝试加载页面，但该网址不是同一个域。因此，您会收到规定的错误。

了解CORS：

出于众所周知的安全原因，从脚本中发起的跨站点HTTP请求受到众所周知的限制。例如，使用XMLHttpRequest对象进行的HTTP请求受同源策略的约束。特别是，这意味着使用XMLHttpRequest的Web应用程序只能向其加载的域发出HTTP请求，而不能向其他域发出HTTP请求。开发人员表示希望安全地发展XMLHttpRequest等功能，以制作跨站点请求，以便在Web应用程序中实现更好，更安全的混搭。

注意：有一些方法可以在chrome中禁用安全性，但不建议这样做。

Answer 2

这就是我的工作方式：

script.js 中的

:(“数据传递给指令”）

app.controller('Controller', function() {
    this.customer = {
        name: 'Alice',
        address: '123 Main Street',
    };
});

test.html

中的

<div ng-controller="Controller as ctrl">
<my-customer></my-customer>

请注意，必须使用别名as ctrl。

将 my-customer.html 更改为:(使用Controller中的数据）

Name: {{ctrl.customer.name}} Address: {{ctrl.customer.address}}

自定义指令的演示

2 个答案: