My directive is not inserting html correctly. I think I need to compile the html before inserting it but I'm not exactly sure how to do this. My template works fine the first time, but when it is replaced the ng-click() event is not registering and the html responds as a normal anchor tag.
There's probably a cleaner way of writing this as well if someone could help with best practices that would be appreciated. I'm just using the openSigninDialog() event on the replaced signout text for testing purposes obviously.
Directive
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>");
});
}
}
});
Controller
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>
I was going about this wrong. I ended up using angularjs' built in ng-show and ng-hide directives.
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;
};
});