Skip to main content
edited title
Link
Ashish Mehta
  • 7.4k
  • 4
  • 29
  • 52

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

added 1067 characters in body
Source Link
Ashish Mehta
  • 7.4k
  • 4
  • 29
  • 52

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.

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.

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.

added 431 characters in body
Source Link
Ashish Mehta
  • 7.4k
  • 4
  • 29
  • 52

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',
                    });                    
            });
        }
    };
});

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.

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.

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',
                    });                    
            });
        }
    };
});

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.

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',
                    });                    
            });
        }
    };
});

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.

Source Link
Ashish Mehta
  • 7.4k
  • 4
  • 29
  • 52
Loading