CODEWITHSUNDEEP
angularjs
3gwebtrain
3gwebtrain

Reputation: 15293

How to pass a template from a conditional command and interchange the directive data in between

In my directive I have 2 constrains:

1) I need to pass the template from a conditional function

2) I require to interchange the data between active `directive' to the clicked one directive

Here there is my conditional function :

.directive('programName', function ($compile) {
    return {
        restrict: 'AE',
        replace: true,
        scope: {
            appName: '=',
            index: '@',
            percent: '='
        },
        link: function (scope, element, attr) {
            var getTemplate = function (index) {
                return Number(index) ? '<h2 class="que t{{index}}" ng-click=callMe()>{{appName.name}} {{appName.company}}{{appName.percent}}</h2>' : 'htmlTemp/activeHTML.html'; // how to pass html template here?
            }
            element.html(getTemplate(scope.index));
            $compile(element.contents())(scope);
        },
        controller: function ($scope) {
            $scope.callMe = function () {
                $scope.percent = $scope.appName.percent;
            }
        }
    }

Here is the demo

Upvotes: 0

Views: 73

Answers (1)

Dmitri Algazin
Dmitri Algazin

Reputation: 3456

what I would do,

create two more directives: my-template-1 and my-template-2,

in your main 'programName' template use simple span with ng-show/ng-hide conditions, add boolean function isNumber() under controller scope. based on isNumber() result you will show my-template-1 or my-template-2, do not forget to pass necessary parameters inside each new directive

No need for all that compile things. Be easier!

Update:

<program-name index="1" app-name="some app name" percent="some percent"></program-name>
<program-name index="2" app-name="some app name" percent="some percent"></program-name>

.directive('programName', function () {
    return {
        restrict: 'AE',
        replace: true,
        template: '<span><temp1 ng-show="checkNumber(1)"></temp1><temp2 ng-show="checkNumber(2)"></temp2></span>',
        scope: {
            appName: '=',
            index: '@',
            percent: '='
        },
        link: function (scope, element, attr) {
            scope.checkNumber = function (number) {
                return number && scope.index && parseInt(number) == parseInt(scope.index);
            };
        }
    }
})

.directive('temp1', function () {
    return {
        restrict: 'AE',
        replace: true,
        template: '<h2 class="que t1">{{appName.name}} {{appName.company}}{{percent}}</h2>',
        scope: {
            appName: '=',
            percent: '='
        },
        link: function (scope, element, attr) {
        }
    }
})

.directive('temp2', function () {
    return {
        restrict: 'AE',
        replace: true,
        templateUrl: 'htmlTemp/activeHTML.html',
        scope: {  // not sure what you need here
            appName: '=',
            percent: '='
        },
        link: function (scope, element, attr) {
        }
    }
})

You know what I would suggest you, spend 5 hours watching simple directive creation video lessons on you-tube or somewhere else, and you will understand all that staff

Upvotes: 1

Related Questions