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

回答

相關問題