Угловая директива не будет отображаться

Изучая директивы, я продолжаю получать что-то не так, потому что я просто не могу сделать одну работу, чтобы импортировать что-то из другого html-файла.Угловая директива не будет отображаться

HTML (index.html)

<!DOCTYPE html> 
<html ng-app="myapp"> 
<head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><script type="text/javascript" src="app.js"></script></head> 
<body> 

<hello-world></hello-world> 

</body></html>

HTML (ssth.html - в том же каталоге, index.html):

<h3>hello world</h3>

JavaScript (app.js - же реж)

(function(){ 
var app = angular.module('myapp', []); 

app.directive('helloWorld', function() { 
return { 
    restrict: 'AE', 
    replace: 'true', 
    templateUrl: "ssth.html", 
}; 
}); 
})();

Однако мой браузер просто не покажет hello word для меня. Я знаю, что есть что-то основное, что мне не хватает, но что?

отчеты об ошибках из хромированной консоли:

XMLHttpRequest cannot load file:///.../ssth.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///.../ssth.html'.
Error: [$compile:tpload] http://errors.angularjs.org/1.3.14/ $compile/tpload?p0=ssth.html

источник

2015-05-06 CookieMonster

Попробуйте создать jsfiddle или plunker с примером :) – fusio

любая ошибка в консоли? вам нужно разместить свою папку на сервере. Чтобы получить доступ к шаблону –

@CookieMonster вам нужно разместить свою папку кода на каком-то сервере, например wamp или IIS –

Вы должны разместить код на каком-либо сервере, чтобы шаблон был доступен, так как шаблон url, который будет загружаться, должен иметь протокол //http.

Что происходит, когда он использует протокол //file?

При получения этого шаблона с помощью углового он использует $templateRequest для извлечения шаблона & $templateRequest API использует $http метод для извлечения шаблонов, и если вы сделали какой-либо Ajax вызов с //file протоколом, который собирается на провал, так или иначе. Поэтому, разместив свою папку кода на каком-то сервере, таком как WAMP, IIS и т. Д., Вы исправите свою проблему.

Работа Вокруг (если вы это исправить без хостинга кода)

Другим возможным быстрое решение будет использовать template вариант вместо templateUrl как template: "<h3>hello world</h3>" но это было бы не лучший способ, чтобы исправить это.:)

источник

2015-05-06 14:25:23

аккуратный! спасибо за подробный ответ! – CookieMonster

@CookieMonster было бы хорошо, если бы вы отметили его как правильно .. :) –

-1

Вы добавили свой директивный скрипт в index.html?

<script src="{path}/helloWorld.js"></script>

источник

2015-05-06 10:47:07 Rhanox

просто загрузил все это, чтобы вы могли видеть, что это за контент. im довольно уверен, что я пропустил что-то слишком основное, и мой мозг превращается в тушеное мясо, пытаясь понять это. – CookieMonster

Ваш браузер возвращает ошибку в консоли? – Rhanox

Да, 3 ошибки: ____error 1: XMLHttpRequest не может загрузить файл: ///.../ssth.html. Запросы на кросс-начало поддерживаются только для схем протокола: http, data, chrome, chrome-extension, https, chrome-extension-resource. ___error 2: Ошибка: не удалось выполнить 'send' on 'XMLHttpRequest': не удалось загрузить файл: ///.../ssth.html. ___error 3: Ошибка: [$ compile: tpload] http://errors.angularjs.org/1.3.14/$compile/tpload?p0=ssth.html – CookieMonster

Пожалуйста, проверьте эту ссылку: http://plnkr.co/edit/e3w54TZEmfj8h5O6BX7B?p=preview,

Я решил вашу проблему в приведенной выше ссылке.

добавить <hello-world></hello-world> в index.html и

в script.js файле, я добавить

gitHubViewer.directive('helloWorld', function() { 
return { 
    restrict: 'AE', 
    replace: 'true', 
    templateUrl: "ssth.html", 
}; 
});

Пожалуйста, ознакомьтесь с его.

источник

2015-05-06 11:07:25

ваш код почти такой же, как у меня, у вас есть еще две строки html, добавляющие текст и кнопку. он работает на plnkr.co, но не работает локально (такие же консольные ошибки). Я думаю, что ответ лежит на комментарии @ pankajparkar. – CookieMonster

Угловая директива не будет отображаться

ответ

Смежные вопросы