小编Jef*_*Jef的帖子

Angular JS Custom Directive不作为元素标记

我正在玩基本的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>

Run Code Online (Sandbox Code Playgroud)

所有功能于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!"
})

Run Code Online (Sandbox Code Playgroud)

secondDirective.js