Question

这是我的自定义指令

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.
             */
        }
    }
});

这是我的HTML代码

<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>

当我通过替换template将html代码直接放在temlateUrl内时它工作正常但是，当我使用templateUrl运行时，我没有得到html代码，它没有显示任何内容，只是空白页...我该怎么办？

Answer 1

问题是浏览器不知道~字符是什么。据我所知，它是asp.net的语法。你必须把这样的相对路径：

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

Answer 2

使用此

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

无法从自定义指令呈现templateUrl

2 个答案: