[javascript] 1个页面上带有回调的多个自定义指令


0 Answers

Question

我已经创建了一个自定义指令(从一些SO的帮助)。 这是一个完整的页面日期选择器,它使用ngModel来设置用户选择日期的日期。 同时它调用一个回调函数,当指令被添加到页面时被设置。 问题是,如果我把2个日期选择器在页面上,那么它总是试图从第二个调用回调。

这里是HTML ...

<fp-date-picker ng-model="dateOne" on-select="dateSelectedOne()"></fp-date-picker>

<fp-date-picker ng-model="dateTwo" on-select="dateSelectedTwo()"></fp-date-picker>

这里是我的指令,其中大部分被删除,以简洁起见

angular.module('directives').directive('fpDatePicker', ['$parse', function ($parse) {

    return {

        restrict: 'EA',
        require: 'ngModel',
        templateUrl: '/templates/fpDatePicker.tpl.html',

        link: function($scope, $element, $attrs, ngModel){

            // A callback executed when a date is selected
            var onSelectCallback = $parse($attrs.onSelect);


            // Set current month
            $scope.selectedDate = moment();



            // Set date when one is clicked
            $scope.selectDate = function(day){

                var selectedDay = day.number;
                var selectedMonth = $scope.currentMonth.format('MM');
                var selectedYear = $scope.currentMonth.format('YYYY');

                $scope.selectedDate = moment(selectedYear + '-' + selectedMonth + '-' + selectedDay, 'YYYY-MM-DD');

                // Update the model
                ngModel.$setViewValue($scope.selectedDate);


                // Call the on-select callback
                onSelectCallback($scope);

            };


        }


    };

}]);

以防万一需要,这里是我的指令模板....

<div class="fpDatePicker-controls">
    <a href="#" ng-click="previousMonth()">&lt;</a>
    <a href="#" ng-click="nextMonth()">&gt;</a>
</div>
<div class="fpDatePicker-month">
    <a class="fpDatePicker-day" 
        ng-repeat="day in currentMonth.days" 
        ng-click="selectDate(day)"
    >
        {{day.number}}
    </a>
</div>

我认为它始终使用页面上指令的最后一个实例的回调的问题可能是链接函数中的变量对该指令的所有实例是全局的,或$ attrs不是该指令的attrs指令的当前实例,但是我使用console.log()来显示$ attrs,并且在每种情况下都是不同的。

我还想知道是否与作用域隔离有关,但尽管回调函数位于作用域上,但属性中的表达式并不是作用域的一部分,它是一个传入的属性。

非常困惑,任何帮助真的不胜感激。

更新:创建一个Plunkr

http://plnkr.co/edit/nU27Wjpu3UYCR9q6DnLw?p=preview




Related