AngularJS ng-flatpickr指令作用域与绑定失效问题

我帮你梳理下问题根源和解决办法：angular-flatpickr指令里的fpOpts和fpOnSetup用的是**&类型的作用域绑定**，这种绑定是用来执行父作用域的表达式，而不是直接传递对象或函数——你之前的写法没匹配这个规则，所以才导致配置和回调没生效。

第一步：修正fp-opts的传递方式 #

因为&绑定需要执行一个表达式来获取值，所以不能直接传对象，得把dateOpts改成返回配置对象的函数，同时模板里要调用这个函数：

自定义指令的link函数调整 #

function link($scope, element, attrs) {
  // 把dateOpts改为返回配置的函数
  $scope.dateOpts = function() {
    return {
      dateFormat: 'Y-m-d',
      placeholder: 'Change date..',
      defaultDate: '2016-03-01 03:30:00 -0300',
      onChange: function (selectedDates, dateStr, instance) {
        // 这里可以正常访问自定义指令的$scope，执行你的业务逻辑
        console.log('选中的日期：', dateStr);
      }
    };
  };

  $scope.datePostSetup = function (fpItem) {
    console.log('flatpickr实例已初始化：', fpItem);
  };
}

模板中的写法调整 #

<input ng-flatpickr fp-opts="dateOpts()" fp-on-setup="datePostSetup(fpItem)" ng-model="myStartDate">

为什么原来的写法不生效？ #

&绑定的本质是在指令内部创建一个函数，这个函数会去父作用域执行你指定的表达式。如果直接写fp-opts="dateOpts"，指令会尝试执行dateOpts这个“表达式”——但dateOpts是个对象，不是可执行的函数，自然拿不到正确的配置，后续的onChange和fp-on-setup回调也就不会触发了。

改成dateOpts()后，表达式变成调用这个函数，就能返回我们需要的配置对象，angular-flatpickr就能正确加载配置，同时触发setup回调了。

内容的提问来源于stack exchange，提问作者Paul