Question

我正在玩基本的Angular JS。我以为我很了解自定义指令但是如果我将它们用作元素属性，我只能让它们出现在模板中。而且我不想使用评论或类名，因为那些不是最佳实践。根据文档和其他来源，这些指令应该作为元素和元素属性。

在我的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>

Answer 1

在角度1.2x中，您必须将限制值设置为包含“E”，因为默认情况下不包含该值。

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

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

Answer 2

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

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

Angular JS Custom Directive无法用作元素标记

2 个答案: