Question

我已经和AngularJS一起探索了几天，我想到了创建一个日期选择器。我碰到了一些对我来说还不完全清楚的事情。首先，这是我为datepicker编写的代码：

angular.module('datepicker', []).directive('myDatepicker', function() {
    return {
        scope: {
        clickCallback: '&',
        options: '='
    },
    restrict: 'E',
    templateUrl: 'datepicker.php',
    link: function($scope, $element, $attr) {      

        $scope.day = 0;
        $scope.month = 0;
        $scope.year = 0;

        $scope.years = [];
        $scope.days = [];
        $scope.months = getStandardMonths();

        $scope.init = function() {
            for (var i = 1; i <= 31; i++)
                $scope.days.push({
                    value: i, 
                    text: (i < 10) ? "0" + i : i
                });
            $scope.days.unshift({
                value: 0, 
                text: "--"
            });

            $scope.months.unshift({
                value: 0, 
                text: "--"
            });

            var year = new Date().getFullYear();
            var start = year + 3;
            var end = year - 50;

            for (var j = start; j >= end; j--) {
                $scope.years.push({
                    value: j, 
                    text: j
                });
            }
            $scope.years.unshift({
                value: 0, 
                text: "--"
            });
        }

        $scope.update = function() {
            var last = 32 - new Date($scope.year, $scope.month - 1, 32).getDate();
            if ($scope.day > last) {
                $scope.day = last;
            }

            last++;
            if ($scope.days.length > last) {
                var shrink = $scope.days.length - last;
                $scope.days.splice(last, shrink);
            } else {
                for (var i = $scope.days.length; i < last; i++)
                    $scope.days.push({
                        value: i, 
                        text: i
                    });
            }

            if ($attr.partial) {
                $scope.dism = !($scope.year);
                $scope.disd = !($scope.month);
                if (!$scope.year) {
                    $scope.disd = true;
                    $scope.day = $scope.month = 0;
                } 

                if (!$scope.month) {
                    $scope.day = 0;
                } 
            }
        }

        $scope.disd = $scope.dism = ($attr.partial === undefined) ? false : $attr.partial;

        $scope.init();
    }
};
});

这是我为了呈现datepicker模块而编写的模板：

<select ng-model="day" ng-options="d.value as d.text for d in days" ng-visible="!disd">     </select>
<select ng-model="month" ng-options="m.value as m.text for m in months" ng-change="update()" ng-visible="!dism"></select>
<select ng-model="year" ng-options="y.value as y.text for y in years" ng-change="update()"></select>

我的用法，这是相当简单的：

<my-datepicker partial="true" />

现在，当我多次复制上面的行时，它仍然呈现一个单独的日期选择器控件（html页面上没有显示多个日期选择器）。我似乎无法理解为什么，如果有人能在这里说清楚，我会非常感激。

我有一个不同项目的列表，都有自己的日期。我的下一步是将list对象中的日期绑定到该datepicker内的函数。

注意：部分属性是允许用户不填写完整日期，而只填写一年或一年和一个月。

Answer 1

我通过阅读更多关于AngularJS的内容来解决自己的问题。在传统的javascript编码方式中，我的思绪过于扭曲。如果其他人有这个问题，这是我的固定代码。下面的代码呈现了我的datepicker指令的多个实例：

<div ng-controller="DatepickerController" class="md">
        <p><b>Datepicker (partial)</b></p>
        <div ng-repeat="d in dates" ng-include src="'dateitem.php'" ></div>
        <br /><br />
        <p><b>Datepicker (non partial)</b></p>
        <select ng-model="selecteddate" ng-options="d as d.desc for d in dates"></select>
        {{selecteddate}}<br/>
        <my-datepicker ng-model="selecteddate.date"></td-datepicker>
    </div>

我使用ng-model将我的mysql格式化日期“绑定”为字符串。

scope: {
        clickCallback: '&',
        options: '=',
        ngm: '=ngModel'
    },
    require: 'ngModel',

这些是我的日期，需要显示为datepicker对象：

function DatepickerController($scope) {
'use strict';

$scope.dates = [
{
    date: "2008-04-02",
    desc: "Full date"
},

{
    date: "2010-02-00",
    desc: "Missing day date"
},

{
    date: "1999-00-00",
    desc: "Missing month date"
},

{
    date: "0000-00-00",
    desc: "Empty date"
}
];

// non partial shizzle
$scope.selecteddate = $scope.dates[0];
}

datepicker的实例： http://sandbox.matvp.info/angularjs/?datepicker

AngularJS：多次渲染自己的模块

1 个答案: