custom directive attribute value is not getting in templateUrl callback function

Question

I want help to get value in templateUrl. I already go through similar question like this Set templateUrl base on attribute in directive

My Goal

I want to set one attribute while calling directive from HTML. This attribute will have dynamic value from the json object. And I want this attribute in directive's templateUrl function.

You can see here to understand my issue more - jsfiddle

I want to render checkbox or radio template based on attribute value.

Please help.

I know ng-include approach so please suggestion alternate solution.

Alborz · Accepted Answer · 2014-07-14 13:00:09Z

2

scope is not accessible in tempalteUrl function. In link function you can access the template Url as well as the scope. I changed your code here.

angular.module("myApp",[]).controller("myCtrl",['$scope',function($scope) {
    $scope.dynamicAttr = [
        {
            style:"stdRadio",
            label:"First Box"
        },
        {
            style:"stdCheck",
            label:"Second Box"
        }
    ];
}]).directive("dynamicComponent",['$compile','$http','$templateCache',function($compile, $http,$templateCache) {
    return {
        scope:{
            sourceData:"=sourceData"
        },
        restrict:"E",

        link: function (scope, element, attrs) {
            $http.get((scope.sourceData.style == "stdRadio")?"dynamicComponentRadio.html":"dynamicComponentCheckBox.html", {cache: $templateCache}).then(function(data){

         element.html(data.data);
         return $compile(element.contents())(scope);
            });

        }
    }
}]);

answered Jul 14, 2014 at 13:00

Alborz

6,9333 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jay Shukla Over a year ago

Thanks. Can you suggest me how to handle user interaction dynamically? Such like how to pass methods which can we call from dynamicComponent template.

Alborz Over a year ago

You can simply add ng-click to your templates. the function could be declared in scope.

Jay Shukla Over a year ago

Ya that I know but what my issue is how to call two different methods on two separate checkbox. Though that both checkbox will be render from one template only so how can I pass that methods and where should I define that

Collectives™ on Stack Overflow

custom directive attribute value is not getting in templateUrl callback function

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related