Skip to content

Instantly share code, notes, and snippets.

@emadb

emadb/app.js

Last active August 29, 2015 14:11
Show Gist options
  • Save emadb/5e74da38c9221ef9cda8 to your computer and use it in GitHub Desktop.
Save emadb/5e74da38c9221ef9cda8 to your computer and use it in GitHub Desktop.
Download ZIP
Angular directive rendering.
Raw
app.js
window.app = angular.module('myApp', []);
window.app.controller('mainController', function($scope){
$scope.title = "Demo";
$('#btn').click(function(){
console.log('Controller: click');
});
});
window.app.directive('myDir', [function () {
return {
restrict: 'E',
transclude: true,
scope: {
lblContext: "@"
},
templateUrl: 'dir.html',
link: function (scope, element, attrs) {
// Something to do with the element defined in dir.html
}
};
}]);
Raw
dir.html
<h1>I am a directive</h1>
<div class="container-fluid" ng-transclude>
</div>
Raw
index.html
<html>
<body ng-app="myApp" ng-view ng-controller="mainController">
<h2>{{title}}</h2>
<my-dir>
<p>
Content here.
<button id="btn">A button</button>
</p>
</my-dir>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
@emadb
Copy link
Author

emadb commented Dec 10, 2014

The btn click event handler is never called. Probably because the DOM is not ready yet.
The question is, what is the correct way to dealing with these situations?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment