Angularjs 지시어 컴파일

Question

지시문이 html을 올바르게 삽입하지 않습니다. 삽입하기 전에 HTML을 컴파일해야한다고 생각하지만 정확히 어떻게해야하는지 잘 모르겠습니다. 내 템플릿은 처음에는 잘 작동하지만, 대체되면 ng-click() 이벤트가 등록되지 않고 html이 일반 앵커 태그로 응답합니다.

누군가가 평가할 수있는 모범 사례를 도울 수 있다면이 방법을 쓰는 것이 더 깨끗한 방법 일 것입니다. 난 그냥 분명히 테스트 목적을 위해 교체 된 signout 텍스트에 대한 openSigninDialog() 이벤트를 사용하고 있습니다.

지침

app.directive('navbarright', function() { 
    return { 
    restrict: "A", 
    template: "<li><a href='#'>New</a></li>"+ 
      "<li><a href='' ng-click='openSigninDialog()'>Sign In</a></li>", 
    link: function (scope, elem, attrs) { 
     scope.$on('event:auth-signinConfirmed', function() { 
     elem.html("<li><a href='#'>New</a></li>"+ 
     "<li><a href='' ng-click='openSigninDialog()'>Sign Out</a></li>"); 
     }); 
    } 
    } 
}); 

컨트롤러

app.controller('NavbarRightCtrl', function($scope) { 
    console.log('signin event occuring'); 
    $rootScope.$broadcast('event:auth-signinConfirmed'); 
}); 

HTML

<ul class="nav pull-right" ng-controller="NavbarRightCtrl" navbarright> 
    </ul> 

Answer 1

나는이 문제에 대해 가고 있었다. 나는 ng-show 및 ng-hide 지시문에 내장 된 angularjs '를 사용하여 끝내게되었습니다.

HTML

<ul class="nav pull-right" ng-controller="NavbarRightCtrl"> 
     <li><a href="#">New</a></li> 
     <li ng-hide="signedIn"><a href="" ng-click="signin()" ng-init="load()">Sign In</a></li> 
     <li ng-show="signedIn"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Bob <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="" ng-click="signout()">Sign Out</a></li> 
     </ul> 
     </li> 
    </ul> 

자바 스크립트

app.controller('NavbarRightCtrl', function($scope, $rootScope) { 

$scope.signin = function(){ 
    console.log('signin event'); 
    $rootScope.signedIn = true; 
}); 

$scope.signout = function() { 
    console.log('signing out'); 
    $rootScope.signedIn = false; 
}; 

$scope.load = function() { 
    $rootScope.signedIn = false; 
}; 

});