Angular JS Custom Directive not element as element tag

我在玩基本的Angular JS东西。我认为我很了解自定义指令，但我只能将它们显示在模板中，如果我将它们用作元素属性。而且我不想使用评论或类名，因为那些不是最佳实践。根据文档和其他来源，这些指令应该作为一个元素和一个元素属性来工作。Angular JS Custom Directive not element as element tag

在我的index中，你会看到我宣布我的指令两次 - 在顶部的块中作为属性（工作）和底部块作为元素（不起作用）。我深深陷入这个问题。任何见解都非常感谢。

的index.html

<head> 
    <title>Test App</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link href='styles/css/style.css' rel='stylesheet' type="text/css"> 

    <script src="vendor/angular_1.2.13/angular.min.js"></script> 

</head> 

<body ng-app="testApp" class="app__body"> 
    <div class="body__inner"> 
     <header> 
      <h1>My New Test App</h1> 
     </header> 

     <div first-directive></div> 
     <div second-directive></div> 

     <first-directive></first-directive> 
     <second-directive></second-directive> 

    </div> 
    <script src="scripts/all-in-one.js" type="text/javascript"></script> 
</body>

所有功能于one.js

'use strict'; 

angular.module('testApp', []) 

.directive('firstDirective', function() { 
    return { 
     template: 'Hello World' 
    } 
}) 

.directive('secondDirective', function() { 
    return { 
     templateUrl: '/scripts/directives/secondDirective.js' 
    } 
}) 

.controller('firstCtrl', function($scope) { 
    $scope.message = "Hola Amigos!" 
})

secondDirective.js

<div> 
    <h2>Esta Aqui!</h2> 
</div>

来源

2017-04-02 Jef

您是否在控制台中出现交叉错误？....如果您是这样，您需要使用类似Mamp –

@PatoSalazar的服务来提供html模板，它与这个问题有什么关系？ –

我试图在Chrome中加载他的代码，并且我得到了那个错误。如果我使用Mamp加载站点，那么代码的工作原理是 –

在角1.2倍你必须设置限制值，以包括'E'，因为它默认不包括在内。

.directive('secondDirective', function() { 
    return { 
     restrict: 'EA', 
     template: '<div><h2>Esta Aqui!</h2></div>' 
    } 
})

升级到较新的角度版本时，'EA'被设置为默认值。

来源

2017-04-02 03:13:23 Ace

我想默认值是EA，这意味着元素标签和属性名称都可以调用该指令。 –

@TomSarduy它是在版本大于1.2x – Ace

外观复制他的代码...确保文件的路径是好的，并用mamp打开它们...问题的代码工作...它是一个十字架原产地问题 –

-1

[更新] 用户@Ace指出，您可能正在使用Angular的旧版本。当您返回使其工作时，您需要声明restrict: 'EA'。

此外，以防万一，如果你运行你的代码，并在控制台中获得交叉原点错误。这里AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https表示这是因为你正试图从浏览器加载一个html模板。你需要使用类似MAMP的东西。

来源

2017-04-02 03:16:41

Angular JS Custom Directive not element as element tag

回答

相关问题