指令元素没有显示

时间:2015-01-25 18:32:33

标签: javascript angularjs

我是棱角分明的新人。我尝试创建一个应用程序,一切顺利,直到我决定创建一个自定义指令。

我的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文件分别如下所示:

app.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: '/'
      });
  });

controllers.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;
                })
            };
        }
    ]);

services.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;
  }]);

directives.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>

现在,因为我创建了指令 square 并将其设置为元素,我希望输出如下:

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

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

谁能告诉我为什么?我假设因为我没有错误,这只是我的误解。

1 个答案:

答案 0 :(得分:3)

指令中有拼写错误:

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

sqaure更改为square