CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Syed Rasheed
Syed Rasheed

Reputation: 559

Unable to render templateUrl from custom Directive

This is my custom Directive

centraApp.directive('counter', function () {
    return {
        restrict: 'A',
        scope: { value: '=value' },
        templateUrl: '~/Scripts/app/shared/directives/counter/partials/counter.html',       
        link: function (scope, element, attributes) {
            // Make sure the value attribute is not missing.
            if (angular.isUndefined(scope.value)) {
                throw "Missing the value attribute on the counter directive.";
            }

            var min = angular.isUndefined(attributes.min) ? null : parseInt(attributes.min);
            var max = angular.isUndefined(attributes.max) ? null : parseInt(attributes.max);
            var step = angular.isUndefined(attributes.step) ? 1 : parseInt(attributes.step);

            element.addClass('counter-container');

            // If the 'editable' attribute is set, we will make the field editable.
            scope.readonly = angular.isUndefined(attributes.editable) ? true : false;

            /**
             * Sets the value as an integer.
             */
            var setValue = function (val) {
                scope.value = parseInt(val);
            }

            // Set the value initially, as an integer.
            setValue(scope.value);

            /**
             * Decrement the value and make sure we stay within the limits, if defined.
             */
            scope.minus = function () {
                if (min && (scope.value <= min || scope.value - step <= min) || min === 0 && scope.value < 1) {
                    setValue(min);
                    return false;
                }
                setValue(scope.value - step);
            };

            /**
             * Increment the value and make sure we stay within the limits, if defined.
             */
            scope.plus = function () {
                if (max && (scope.value >= max || scope.value + step >= max)) {
                    setValue(max);
                    return false;
                }
                setValue(scope.value + step);
            };

            /**
             * This is only triggered when the field is manually edited by the user.
             * Where we can perform some validation and make sure that they enter the
             * correct values from within the restrictions.
             */
        }
    }
});

and this is my html code

<a href="javascript:;" class="counter-minus" ng-click="minus()">-</a>\
<input type="label" class="counter-field" ng-model="value">\
<a href="javascript:;" class="counter-plus" ng-click="plus()">+</a>

when i place the html code directly inside the template by replacing the temlateUrl it is working fine but, When i run with using templateUrl, i am not getting the html code, it is not showing anything, just blank page...what should i do?

Upvotes: 1

Views: 86

Answers (2)

durga siva kishore mopuru
durga siva kishore mopuru

Reputation: 1347

Use this

/Scripts/app/shared/directives/counter/partials/counter.html

Upvotes: 1

alisabzevari
alisabzevari

Reputation: 8146

The problem is that browsers does not know what ~ character is. It is asp.net's syntax as far as I know. You have to put relative path like this:

/Scripts/app/shared/directives/counter/partials/counter.html

Upvotes: 1

Related Questions