Skip to content

Instantly share code, notes, and snippets.

@bennadel

bennadel/transclude.htm

Created May 21, 2014 12:08
Show Gist options
  • Save bennadel/879e6c8ca161bef144fb to your computer and use it in GitHub Desktop.
Save bennadel/879e6c8ca161bef144fb to your computer and use it in GitHub Desktop.
Download ZIP
Workflow Differences Between $scope.$watch() and Attributes.$observe() In AngularJS
Raw
transclude.htm
<!doctype html>
<html ng-app="Demo" ng-controller="AppController">
<head>
<meta charset="utf-8" />
<title>
Workflow Differences Between $scope.$watch() and Attributes.$observe() In AngularJS
</title>
</head>
<body>
<h1>
Workflow Differences Between $scope.$watch() and Attributes.$observe() In AngularJS
</h1>
<p bn-outer>
<!-- Inner directive will be injected dynamically. -->
</p>
<!-- Load jQuery and AngularJS. -->
<script type="text/javascript" src="../../vendor/jquery/jquery-2.0.3.min.js"></script>
<script
type="text/javascript"
src="../../vendor/angularjs/angular-1.0.7.min.js"
disabled-src="../../vendor/angularjs/angular-1.2.16.js"
></script>
<script type="text/javascript">
// Create an application module for our demo.
var app = angular.module( "Demo", [] );
// -------------------------------------------------- //
// -------------------------------------------------- //
// Define the root-level controller for the application.
app.controller(
"AppController",
function( $scope ) {
$scope.foo = "bar";
}
);
// -------------------------------------------------- //
// -------------------------------------------------- //
// I compile and inject an instance of another directive at a later time.
app.directive(
"bnOuter",
function( $compile ) {
// I bind the UI events to the local scope.
function link( $scope, element, attributes ) {
var transclude = $compile( "<span bn-inner='test'>Woot</span>" );
// After a brief timeout, clone and inject the compiled DOM element.
setTimeout(
function() {
transclude(
$scope,
function( clone ) {
element.append( clone );
}
);
// Tell AngularJS that a change has occurred (this will
// invoke various $watch() callbacks).
$scope.$digest();
},
250
);
}
// Return the directive configuration.
return({
link: link,
scope: true
});
}
);
// -------------------------------------------------- //
// -------------------------------------------------- //
// I am here to demonstate which callbacks get invoked.
app.directive(
"bnInner",
function( $compile ) {
// I bind the UI events to the local scope.
function link( $scope, element, attributes ) {
// Register an $observe callback.
attributes.$observe(
"bnInner",
function innerObserveFunction() {
console.log( "Inner $observe() fired." );
}
);
// Register a $watch callback.
$scope.$watch(
function innerWatchFunction() {
console.log( "Inner $watch() fired." );
}
);
}
// Return the directive configuration.
return({
link: link,
restrict: "A"
});
}
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment