Question

我正在尝试使用标题和＆amp;创建基本应用程序主视图，使用指令。最初我将指令放在一个单独的文件中，但已将其移至app.js以消除问题。

我尝试过几件不同的事情：

<app-header>＆amp; <div=app-header>
将templateUrl更改为模板：＆＃34;测试标题＆＃34;
链接指令和app.directive

我的index.html：

    <!DOCTYPE html>
    <html lang="en" ng-app="simpleLoginApp">

    <head>
        <meta charset="utf-8" />
        <title> Simple Login </title>
    </head>

    <body>
        <div app-header></div>
        <main role="main" ng-view></main>

        <script src="resources/angular/angular.min.js"></script>
        <script src="resources/angular-route/angular-route.js"></script>
        <script src="app.js"></script>
    </body>

    </html>

我的app.js：

    var app = angular.module('simpleLoginApp', ['ngRoute'])

    .directive('app-header', function() {
      return {
        templateUrl: '/header/header.html'
      };
    })

    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/login', {
                templateUrl: '/login/login.html',
                controller: 'LoginCtrl'
            })
    }]);

Header.html

    <header>
            <h1>HEADER</h1>
    </header>

Answer 1

Header.html只需要：

<h1>HEADER</h1>

您的指令必须是：

.directive('appHeader', function() {
  return {
    restrict: 'E', //This will make your directive work as an element  
    templateUrl: '/header/header.html'
  };
})

然后，您只需将代码作为元素包含在代码中：

<app-header></app-header>

请注意，上述内容仅适用于＆＃34;标题＆＃34; - 您可能想要某种方式来定义不同的标题，对吧？

.directive('appHeader', function() {
  return {
    scope: {
        headerText: '='; 
    }
    restrict: 'E', //This will make your directive work as an element  
    templateUrl: '/header/header.html'
  };
})

然后在你的代码中：

<app-header header-text="lol this is the content of my header ^_^"></app-header>

这样，该指令是可重用的。

Answer 2

问题是你如何注册你的指令。在定义指令时，您应该使用驼峰式情况，例如： appHeader代替app-header。在模板中使用它时，您应该使用破折号。您可以在规范化标题

下看到文档here

简而言之

.directive('app-header', function() {
  return {
    templateUrl: '/header/header.html'
  };
})

到

.directive('appHeader', function() {
  return {
    templateUrl: '/header/header.html'
  };
})

AngularJS指令误解

2 个答案: