scope value does get in link function of directive and template AngularJS

Question

howToUse.view.html

<div class="container-fluid">
    <div class="brif-box">
        <div class="hading cf">
            <h2>{{items.name}}</h2>
        </div>
        <p>{{items.description}}</p>
    </div>
    <my-responsive-tab info="items"></my-responsive-tab>
</div>

in that file items is my scope.

Controller.js

labcatControllers.controller('howTouseCtrl', ['$scope', '$routeParams', 'LibraryService',
function($scope, $routeParams, LibraryService){
    LibraryService.getItemDetails($routeParams.lId).then(function(data){
        $scope.items = data.data;
    });
}])

my data is

{"id":"3","name":"name","demo_url":"url","description":" Lorem ipsum ","html_content":"datasssss"}

directive.js

 .directive('myResponsiveTab', function($sce, $compile) {
    return {
        restrict: 'E',
        scope: {
            customerInfo: '=info'
        },
        templateUrl: 'view/how-to-use-my-custom-responsive-tab.html',
        link: function(scope, element, attrs) {
            console.log(scope.customerInfo)
            scope.names_ = $sce.trustAsResourceUrl(scope.customerInfo.demo_url);
            scope.$watch(attrs.info, function(newValue, oldValue) {
                    element.find("#horizontalTab").easyResponsiveTabs({
                        type: 'default',
                        width: 'auto',
                        fit: true,
                        closed: 'accordion',
                    });                    
            });
        }
    };
});

how-to-use-my-custom-responsive-tab.html

<div id="horizontalTab">
<ul class="resp-tabs-list">
    <li>PREVIEW</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>JQUERY CODE</li>
    <li>FILES Require</li>
    <li>DOWNLOAD FILES</li>
</ul>
<div class="resp-tabs-container">
    <div>
        <iframe height="600px" width="100%" ng-src="{{names_}}"></iframe>
    </div>
    <div>
        <pre>
            <span class="codeIt">{{customerInfo.htmlContent}}</span>
        </pre>
    </div>
    <div>
        <pre>
            <span class="codeIt">{{customerInfo.cssContent}}</span>
        </pre>
    </div>
    <div>
        <pre>
            <span class="codeIt">{{customerInfo.jqueryContent}}</span>
        </pre>
    </div>
    <div>
        <pre>
            <span class="codeIt">{{customerInfo.fileRequireContent}}</span>
        </pre>
    </div>
    <div>6</div>
</div>

in That Error: scope.customerInfo is undefined. When i console scope i see customerInfo Object that scope Object. and When i console.log(scope.customerInfo) got undefined. So Please tell me Where i am wrong. Thanks in Advance.

Let me guess: items on the parent scope is being populated asynchronously? — GregL
– GregL, Commented Nov 30, 2015 at 5:52
Try with e.g. ng-if="items" on the element for the directive. — Arg0n
– Arg0n, Commented Nov 30, 2015 at 5:56

GregL · Accepted Answer · 2015-11-30 06:02:57Z

Because items on the parent controller is populated asynchronously, when the directive is compiled and linked, items will be undefined. Which means that scope.customerInfo will also be undefined.

What you can do instead is use a watch to wait until it has a value for the first time, and do everything when it does. Change your directive code to:

.directive('myResponsiveTab', function($sce, $compile) {
    return {
        restrict: 'E',
        scope: {
            customerInfo: '=info'
        },
        templateUrl: 'view/how-to-use-my-custom-responsive-tab.html',
        link: function(scope, element, attrs) {
            var deregWatch = scope.$watch('customerInfo', function(newValue, oldValue) {
                if (newValue) {
                    deregWatch(); // stop watching now we have a value
                    scope.names_ = $sce.trustAsResourceUrl(scope.customerInfo.demo_url);
                    element.find("#horizontalTab").easyResponsiveTabs({
                        type: 'default',
                        width: 'auto',
                        fit: true,
                        closed: 'accordion',
                    });   
                }                 
            });
        }
    };
});

NB: If you need to detect changes to the info object, you will need to keep watching it so you can re-initialise your directive on every change. Otherwise, remove the watch to keep the digest cycle as fast as possible.

Thanks. I got customerInfo in directive but in template URl can not get a customerInfo Obj
@AshishMehta What do you mean by "in template URI"? Do you mean your call to $sce.trustAsResourceUrl(), scope.customerInfo is undefined? Or do you mean that you want to use a different template URL depending on the scope.customerInfo object?
Plz Chk my Updated Question. I want to print my customerInfo Object value in how-to-use-my-custom-responsive-tab.html

Arg0n · Accepted Answer · 2015-11-30 07:10:09Z

1

By using ng-if="items" on the element for the directive, angular will wait to render it until you have a value in items, and it will not be undefined when reaching link.

To render the HTML do something like this in link or controller for the directive:

scope.myHtml = $sce.trustAsHtml(customerInfo.htmlContent);

And in your template (something like this):

<span ng-bind="myHtml" class="codeIt"></span>

edited Nov 30, 2015 at 7:10

answered Nov 30, 2015 at 6:09

Arg0n

8,4532 gold badges26 silver badges39 bronze badges

8 Comments

Ashish Mehta Over a year ago

Thanks I got customerInfo in directive but in template URl can not get

Arg0n Over a year ago

Please update your question with what you're trying to do.

Ashish Mehta Over a year ago

Plz chk my updated question. I want to print htmlContent in how-to-use-my-custom-responsive-tab.html page

Ashish Mehta Over a year ago

i am beginner in AngularJs. so Am i doing right way?

Arg0n Over a year ago

This does not really have to do anything with the original question. But you need to use $sce.trustAsHtml on customerInfo.htmlContent and assign it to a variable in your scope. See the updated answer.

|

Collectives™ on Stack Overflow

scope value does get in link function of directive and template AngularJS

2 Answers 2

4 Comments

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

8 Comments

Related