지시어 요소가 표시되지 않습니다.

-1

새로운 각도입니다. 응용 프로그램을 만들려고했는데 사용자 지정 지시문을 만들기 전까지는 모두 잘 진행되고있었습니다.지시어 요소가 표시되지 않습니다.

<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와 파일을 각각 다음과 같이 :

내 HTML은 다음과 같습니다

이

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을 app.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>

을 : 그것은 다음과 같습니다

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

을하고 또한 것 경고가있을 것으로 기대한다. 하지만 나는 아무것도 얻지 못합니다. 오류가없고 Html은 수정되지 않습니다.

아무도 말해 줄 수 있습니까? 나는 오류가 없기 때문에 내 부분에 대한 오해라고 생각합니다.

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

변경 square에 sqaure :

출처

2015-01-25 r3plica

당신은이 지침에 오타가 있습니다.

출처

2015-01-25 18:42:21

권자 : 빌어 먹을 :(나는 단순한 것이라고 알고있다. – r3plica

주석에 주석이 적혀 있고 질문이 삭제 된 것이 더 좋다. –

지시어 요소가 표시되지 않습니다.

답변

관련 문제