angularjs - Angular - condition, transclude -

i've written sample directive conditional content (component.html):

<div class="panel panel-default"> <div class="panel-heading">{{title}}</div> <div class="panel-body">     <p ng-show="loadingvisible()" class="text-center">loading...</p>      <div ng-show="!loadingvisible()" ng-transclude></div> </div> 

directive code (component.js):

app.directive('component', function () {     return {         restrict : 'a',         transclude : true,         replace : true,         templateurl : 'component.html',         require : '^title',         scope : {             title : '@',             loadingvisible : '&'         },         controller : [ '$scope', function ($scope) {             if (!$scope.loadingvisible) {                 $scope.loadingvisible = function () {                     return false;                 };             }         } ]     }; }); 

the main use of directive (sample.html):

<div component title="title">     <div id="t"></div> </div> 

and controller code (sample.js):

app.directive('sample', function () {         return {             restrict: 'a',             templateurl: 'sample.html',             controller: [ '$scope', function ($scope) {                 $('#id');         } ]     }; }); 

0 problem div aquired using jquery selector isn't visible. guess it's because loadingvisible method (conditional content) hides div in construction phase. when sample directive tries it fails. doing wrong? what's coorect resolution of problem? or maybe knowledge of directives wrong?

i'll appreciate :)

if you're trying interact dom (or directive element itself), you'll want define link function. link function gets fired after angular compiles directive , gives access directives scope, element itself, , attributes on directive. so, like:

link: function (scope, elem, attrs) {   /* interact elem and/or scope here */ } 

i'm still little unclear directive trying accomplish though, it's tough provide more help. additional details?

so if want ensure title specified, can check presence of title scope var when directive gets linked, throw error if it's not there.

also, there reason loadingvisible needs expression? (using '&' syntax). if need show/hide content based on value, normal one-way '@' binding. overall, like:

app.directive('component', function () {     return {         restrict : 'a',         transclude : true,         replace : true,         templateurl : 'component.html',         scope : {             title : '@',             loadingvisible : '@'         },         link : function (scope, elem, attrs) {            if (!scope.title) {             throw 'must specify title!';           }           if (!attrs.loadingvisible) {               scope.loadingvisible = false;           }         }     }; }); 

if need access of transcluded content, can use elem value gets injected link function, so:

elem.find('#a'); 

an (updated) working plnkr: http://embed.plnkr.co/jvzjqag8gghcv2tz1imk/preview