How to use a scope in Directive template

Mohamad Khani

I want to use $scope variable in template function of directive like this. In the other words i want to generate directive template inside of directive and by using $scope variable.

Help me to connect template function to controller.

directive("data", ['$compile', '$http', '$templateCache',function ($http,$rootScope) {
    return{
    link: function (scope, elem, attrs, ctrl) {
        scope.template = something // I want Generate template here
    },
    template:function(element , attrs){ 
        return $scope.template // I can't access scope here
    }
}
Jaime Beneytez

You can not access to the scope in the template function, if you want to generate the template somehow and then render the template inside the directive I'll suggest to use the $compile service inside the link function in this way :

var a = angular.module('myApp', []);

a.controller('ctrl', function ($scope) {
    $scope.myTemplate = '<span class="custom-tpl"> my template </span>';
});

a.directive('dynamicTemplate', [ '$compile',

function ($compile) {
    'use strict';
    return {
        restrict: 'A',
        scope: {
            customTemplate: '='
        },
        link: function ($scope, $element, $attrs, $controller) {
            var compiledTemplate = $compile($scope.customTemplate)($scope);
            $element.html('').append(compiledTemplate);
        }
    };

}]);

you can check it out here

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

how to use controller $scope in directive template

From Dev

How to pass scope from directive to template

From Dev

how to bind directive scope value to template in angularjs

From Dev

How to refresh directive that existed in template and directive has own scope for data

From Dev

Why use scope in directive and how to use it?

From Dev

how to use isolated scope in custom directive?

From Dev

How to use Angular scope with a service request and a directive

From Dev

how to use scope in angular directive 4

From Dev

How to access isolated $scope in customer AngularJS directive without remote template

From Dev

AngularJs: Directive with function for template property. How to get scope value?

From Dev

How to pass a directive template model to controller / parent scope

From Dev

AngularJs: Directive with function for template property. How to get scope value?

From Dev

How to access an isolated scope within a directive that is not using a template

From Dev

How to use a directive to dynamically change a template?

From Dev

How to use directive to load an external template in Angular?

From Dev

How to use passed data in a directive template?

From Dev

Passing scope in template of a directive - AngularJs

From Dev

How use isolated scope action from one directive to another

From Dev

How can i use scope's variable in directive?

From Dev

How to make a directive have a unique scope item for each use

From Dev

Use a directive to display scope value and update scope

From Dev

Can't access scope from the directive template

From Dev

Reusing a directive template for multiple forms with isolated scope

From Dev

Template always compiles with old scope value in directive

From Dev

AngularJS directive - template from $scope with other directives

From Dev

$scope doesn't apply to compiled template in directive

From Dev

Child directive template not updating after scope change

From Dev

AngularJS directive scope not updating it's template

From Dev

$scope doesn't apply to compiled template in directive

Related Related

  1. 1

    how to use controller $scope in directive template

  2. 2

    How to pass scope from directive to template

  3. 3

    how to bind directive scope value to template in angularjs

  4. 4

    How to refresh directive that existed in template and directive has own scope for data

  5. 5

    Why use scope in directive and how to use it?

  6. 6

    how to use isolated scope in custom directive?

  7. 7

    How to use Angular scope with a service request and a directive

  8. 8

    how to use scope in angular directive 4

  9. 9

    How to access isolated $scope in customer AngularJS directive without remote template

  10. 10

    AngularJs: Directive with function for template property. How to get scope value?

  11. 11

    How to pass a directive template model to controller / parent scope

  12. 12

    AngularJs: Directive with function for template property. How to get scope value?

  13. 13

    How to access an isolated scope within a directive that is not using a template

  14. 14

    How to use a directive to dynamically change a template?

  15. 15

    How to use directive to load an external template in Angular?

  16. 16

    How to use passed data in a directive template?

  17. 17

    Passing scope in template of a directive - AngularJs

  18. 18

    How use isolated scope action from one directive to another

  19. 19

    How can i use scope's variable in directive?

  20. 20

    How to make a directive have a unique scope item for each use

  21. 21

    Use a directive to display scope value and update scope

  22. 22

    Can't access scope from the directive template

  23. 23

    Reusing a directive template for multiple forms with isolated scope

  24. 24

    Template always compiles with old scope value in directive

  25. 25

    AngularJS directive - template from $scope with other directives

  26. 26

    $scope doesn't apply to compiled template in directive

  27. 27

    Child directive template not updating after scope change

  28. 28

    AngularJS directive scope not updating it's template

  29. 29

    $scope doesn't apply to compiled template in directive

HotTag

Archive