Question

我是以角度创建指令的新手，我有点卡在这里，我想创建一个基本的迷你日历指令来选择给定月份的日期。当我们要求时，我仍然会从模板中收到错误。有帮助吗？感谢

function calendarController($scope) {
$scope.config = new Date(2000, 0, 1); } angular.module("calendar", []).directive('miniCalendar', function($parse) {
return {
    restrict: "E",
    replace: true,
    templateUrl: "../views/template.html",
    transclude: true,
    controller: mCalBinding,
    compile: function(element, attrs) {
        debugger;
        var modelAccessor = $parse(attrs.ngModel);
        return function(scope, element, attrs, controller) {
            var processChange = function() {
                // var date = new Date(element.datepicker("getDate"));
                scope.$apply(function(scope) {
                    // Change bound variable
                    debugger;
                    modelAccessor.assign(scope, date);
                });
            };
            element.datepicker({
                inline: true,
                onClose: processChange,
                onSelect: processChange
            });
            // scope.$watch(modelAccessor, function(val) {
            //     return true;
            // });

        };

    }
}; });

function mCalBinding($scope) {
//Binding of the directive
$scope.currentDate = new Date(2000, 0, 1);
$scope.prev = function(data) {

};
$scope.next = function(data) {

};
$scope.currentMonth = 'December';
$scope.currentYear = '2679';
$scope.days = [{
    day: "1"
}, {
    day: "2"
}, {
    day: "3"
}, {
    day: "4"
}, {
    day: "5"
}, {
    day: "6"
}, {
    day: "7"
}, {
    day: "8"
}, {
    day: "9"
}, {
    day: "10"
}, {
    day: "11"
}, {
    day: "12"
}, {
    day: "13"
}];
$scope.weeks = [{
    week: "1",
    days: [{
        day: "1"
    }, {
        day: "2"
    }, {
        day: "3"
    }, {
        day: "4"
    }, {
        day: "5"
    }, {
        day: "6"
    }, {
        day: "7"
    }, {
        day: "8"
    }, {
        day: "9"
    }, {
        day: "10"
    }, {
        day: "11"
    }, {
        day: "12"
    }, {
        day: "13"
    }]
}, {
    week: "2",
    days: [{
        day: "1"
    }, {
        day: "2"
    }, {
        day: "3"
    }, {
        day: "4"
    }, {
        day: "5"
    }, {
        day: "6"
    }, {
        day: "7"
    }, {
        day: "8"
    }, {
        day: "9"
    }, {
        day: "10"
    }, {
        day: "11"
    }, {
        day: "12"
    }, {
        day: "13"
    }]
}, {
    week: "3",
    days: [{
        day: "1"
    }, {
        day: "2"
    }, {
        day: "3"
    }, {
        day: "4"
    }, {
        day: "5"
    }, {
        day: "6"
    }, {
        day: "7"
    }, {
        day: "8"
    }, {
        day: "9"
    }, {
        day: "10"
    }, {
        day: "11"
    }, {
        day: "12"
    }, {
        day: "13"
    }]
}, {
    week: "4",
    days: [{
        day: "1"
    }, {
        day: "2"
    }, {
        day: "3"
    }, {
        day: "4"
    }, {
        day: "5"
    }, {
        day: "6"
    }, {
        day: "7"
    }, {
        day: "8"
    }, {
        day: "9"
    }, {
        day: "10"
    }, {
        day: "11"
    }, {
        day: "12"
    }, {
        day: "13"
    }]
}]; } /* Fragment End - directive */

HTML：

<div ng-app="calendar" ng-controller="calendarController" class="ng-scope">
    <mini-calendar type="text" ng-model="config" /> </div>

和模板：

<input type="text" ng-bind="currentDate">
<div >
    <div >
        <a>
            <span ng-click="prev">Prev</span>
        </a>
        <a>
            <span ng-click="next">Next</span>
        </a>
        <div >
            <span ng-bind="currentMonth">January</span>&nbsp;
            <span ng-bind="currentYear">2000</span>
        </div>
    </div>
    <table>
        <thead>
            <tr>
                <th ng-repeat="day in days">
                    <span ng-bind="day"></span>
                </th>
            </tr>
        </thead>
        <tbody>
        <tr ng-repeat="week in weeks">
            <td ng-repeat="day in days">
                <a ng-bind="day" ng-click="selectDate">1</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

Answer 1

您可能会收到此错误https://docs.angularjs.org/error/$compile/tplrt/

使用template（或templateUrl）声明指令时 替换模式，模板必须只有一个根元素。那 是，模板属性的文本或由引用的内容 templateUrl必须包含在单个html元素中。

例如，blah blah blah而不是简单的等等 blah等等。否则，将导致替换操作 在单个元素（指令）中被替换为多个 元素或节点，不受支持且通常不需要 实践。

我建议完全避免使用replace标志。

现在（1.3.x）已弃用，无论如何都将在下一个主要版本中删除： https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb

AngularJS指令从templateUrl发出检索模板的问题

1 个答案: