Angularjs指令編譯

Question

我的指令沒有正確插入html。我想我需要在插入它之前編譯html，但我不確定如何做到這一點。我的模板第一次正常工作，但是當它被替換時，ng-click（）事件沒有註冊，並且html作爲普通錨定標記進行響應。

如果有人可以幫助我們瞭解最佳實踐，那麼可能還有一種更清晰的書寫方式。我只是在替換的簽名文本上使用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> 

的Javascript

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; 
}; 

});