Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.0rc5.js"></script>
<script type="text/ng-template" id="unauthorized.html"><div>URL Template</div></script>
<div ng-controller="MyCtrl">
Authorized: {{authorized}}!
<input type=checkbox ng-model="authorized" />
<h2>{{status}}</h2>
</div>
<security check='{{authorized}}' />
JavaScript
var myApp = angular.module('myApp',[]);
// Using templateUrl, the toggle function isn't called when the value of authorized changes, if you switch to use the template syntax commented out below, then the toggle method does fire when the value of authorized changes (by changing the check box)
myApp.directive('security', function() {
return {
restrict: 'E',
replace: true,
template: '<div><h1>Inline Template</h1></div>',
templateUrl: 'unauthorized.html',
link: function(scope, element, attrs) {
attrs.$observe('check', toggle);
function toggle(check) {
myApp.$scope.status = "I changed, bingo!";
}
}
}
});
function MyCtrl($scope) {
myApp.$scope = $scope;
$scope.authorized = true;
$scope.status = 'Directive not triggered :(';
}