指令元素未显示

directive element not showing

本文关键字：显示元素指令更新时间：2023-09-26

我是角度的新手。我尝试创建一个应用程序，一切顺利，直到我决定创建自定义指令。

我的 html 看起来像这样：

<body ng-app="sapphireApp">
    <div class="off-canvas-wrap" data-offcanvas>
        <div class="inner-wrap">
            <nav class="tab-bar">
                <section class="middle tab-bar-section">
                    <h1 class="title">Sapphire</h1>
                </section>
                <section class="right-small">
                    <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
                </section>
            </nav>
            <aside class="right-off-canvas-menu" ng-controller="TopController as topController">
                <ul class="off-canvas-list">
                    <li><label>Users</label></li>
                    <li ng-hide="topController.userService.isLoggedIn"><a href="#/login">Login</a></li>
                    <li ng-show="topController.userService.isLoggedIn"><a href="/api/logout">Logout</a></li>
                </ul>
            </aside>
            <section class="main-section" ng-view></section>
            <a class="exit-off-canvas"></a>
        </div>
    </div>
    <script src="scripts/angular.min.js"></script>
    <script src="scripts/mm-foundation/mm-foundation-0.5.1.min.js"></script>
    <script src="scripts/angular-cookies.min.js"></script>
    <script src="scripts/angular-route.min.js"></script>
    <script src="scripts/angular-touch.min.js"></script>
    <script src="scripts/app/app.js"></script>
    <script src="scripts/app/controllers.js"></script>
    <script src="scripts/app/services.js"></script>
    <script src="scripts/app/directives.js"></script>
</body>

我的四个 angularJS 文件分别如下所示：

应用.js

angular.module('sapphireApp', ['ngRoute', 'ngCookies', 'ngTouch', 'mm.foundation'])
  .config(function ($routeProvider) {
      $routeProvider.when('/', {
          templateUrl: 'views/home/index.html'
      })
      .when('/login', {
          templateUrl: 'views/account/login.html'
      })
      $routeProvider.otherwise({
          redirectTo: '/'
      });
  });

控制器.js

angular.module('sapphireApp')
    .controller('TopController', ['UserService',
        function (UserService) {
            var self = this;
            self.userService = UserService;
            // Check if the user is logged in when the application
            // loads
            // User Service will automatically update isLoggedIn
            // after this call finishes
            UserService.session();
        }
    ])
    .controller('HomeController',
        function () {
            var self = this;
        }
    )
    .controller('LoginController', ['UserService', '$location',
        function (UserService, $location) {
            var self = this;
            self.user = { username: '', password: '' };
            self.login = function () {
                UserService.login(self.user).then(function (success) {
                    $location.path('/');
                }, function (error) {
                    self.errorMessage = error.data.msg;
                })
            };
        }
    ]);

服务.js

angular.module('sapphireApp')
  .factory('UserService', ['$http', '$cookieStore', function ($http, $cookieStore) {
      var service = {
          isLoggedIn: false,
          session: function () {
              var user = $cookieStore.get('user');
              if (user)
                  service.isLoggedIn = true;
              return user;
          },
          login: function (user) {
              return $http.post('/api/account/login', user)
                .then(function (response) {
                    service.isLoggedIn = true;
                    $cookieStore.put('user', response);
                    return response;
                });
          }
      };
      return service;
  }]);

指令.js

angular.module('sapphireApp')
    .directive('square', function () {
        return {
            restrict: 'E',
            template: '<div class="square"><h1>Show something else</h1></div>',
            link: function () {
                alert("this is working");
            }
        };
    });

登录视图工作正常，但主页视图不能。它看起来像这样：

<div class="row" ng-controller="HomeController as homeController">
    <div class="small-2 columns">
        <sqaure>
            <h1>This is the square</h1>
        </sqaure>
    </div>
</div>

现在，因为我已经创建了指令方块并将其设置为元素，所以我期望这样的输出：

<sqaure>
    <div class="square">
        <h1>Show something else</h1>
    </div>
</sqaure>

我也希望有一个警报。但我一无所获。没有错误，HTML 保持不变。

谁能告诉我为什么？我假设因为我没有得到任何错误，这只是我的误解。

指令中有拼写错误：

        <sqaure> //typo here
            <h1>This is the square</h1>
        </sqaure> //typo here

将sqaure更改为square。