首页 > 编程语言> > javascript-1个页面上有回调的多个自定义指令

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

2019-11-21 10:34:32 作者：互联网

我创建了一个自定义指令(在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

解决方法:

您的问题出在您的指令不依赖隔离范围这一事实.因此,两个指令实例共享相同的作用域.创建第二个指令时,它将覆盖所有作用域变量.

您可以在文档中了解更多有关隔离范围的信息：https://docs.angularjs.org/guide/directive.

这是一个显示如何使用隔离范围的插件：
http://plnkr.co/edit/U64sbukqfFW0NQmvIC1a

我已经更新了您的标记,使其与控制器兼容,语法如下：

<body ng-controller="MainCtrl as main">
    {{main.dateOne}}
    <fp-date-picker ng-model="main.dateOne" on-select="main.dateSelectedOne()"></fp-date-picker>

    <br />
    <br />
    <br />

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

</body>

指令定义的主要变化是使用指令定义对象中的scope属性来具有独立的作用域：

.directive('fpDatePicker', function() {

    return {
      scope: {
        select: '&onSelect'
      },

      restrict: 'EA',
      require: 'ngModel',
      templateUrl: 'datepicker.html',

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

请注意,您的代码在日期选择方面仍然存在问题.单击一天将选择前一天的日期.我没有解决.如果需要帮助,请让我知道

标签：angularjs,angularjs-directive,angularjs-scope,javascript
来源： https://codeday.me/bug/20191121/2051172.html