angular 指令模板不打印任何文本

Question

我刚刚开始学习 Angular 并尝试通过 angular 自定义指令打印一些文本。但是什么都没有打印出来。请帮帮我。这是 index.html 和 script.js 文件。

angular.module('main', [])
        .controller('mainCtrl', function ($scope) {
        
            $scope.name = "firoz";


        })

        .directive('myDir', function () {
                                
            return {
                restrict : 'E',
                template: '<div>Trying to print this text</div>'
            };
                                
        });

<!DOCTYPE html>
<html ng-app="main">

  <head>
    <script data-require="angular.js@1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl">
  <mydir></mydir>
  </body>

</html>

这是 Plunker link : http://plnkr.co/edit/ub9Ch34OtckzQuCI9sDk?p=preview

Answer 1

在指令中使用时，您需要在任何有大写字母的地方使用连字符，例如：

<my-dir></my-dir>

Answer 2

正确的 Angular 语法是：

<my-dir></my-dir>

angular.module('main', [])
        .controller('mainCtrl', function ($scope) {
        
            $scope.name = "firoz";


        })

        .directive('myDir', function () {
                                
            return {
                restrict : 'E',
                template: '<div>Trying to print this text</div>'
            };
                                
        });

<!DOCTYPE html>
<html ng-app="main">

  <head>
    <script data-require="angular.js@1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl">
  <my-dir></my-dir>
  </body>

</html>

angular 指令模板不打印任何文本

angular directive template not printing any text

templates

directive

angularjs