AngularJS：如何从指令返回变量或修改$scope？

我无法让变量“开始”和“结束”在我的控制器中返回到我的功能

l（）==console.log（）

我正试图扭转这一局面：

将其写入指令：

controller.js

ontrollers.controller('PatientsCtrl', function($scope, $http, $location, $cookies, Popup, Value, Users, User, System){
    $scope.loadUserSystems = function(start, end) {
        l(start);
        l(end);

        return;
        $scope.activeUser = this.user ? this.user : $scope.activeUser;
        User.systems($scope.activeUser.id, start, end).success(function(data){
            $scope.activeSystems = data.systems;
        });
    }


    $scope.dateRangeOptions = {
      ranges: {
                'Today': [new Date(), new Date()],
                'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Last 7 Days': [moment().subtract('days', 6), new Date()],
                'Last 30 Days': [moment().subtract('days', 29), new Date()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
      },
      format: 'MM/DD/YYYY',
      separator: ' to ',
      startDate: moment().subtract('days', 29),
      endDate: new Date(),
      minDate: '01/01/2012',
      maxDate: '12/31/2013',
      locale: {
          applyLabel: 'Submit',
          fromLabel: 'From',
          toLabel: 'To',
          customRangeLabel: 'Custom Range',
          daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
          monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
          firstDay: 1
      },
      showWeekNumbers: true,
      buttonClasses: ['btn-danger'],
      dateLimit: false
   }
});

  $scope.loadUserSystems = function(start, end) {
    start = start.format("YYYY-MM-DD");
    end = end.format("YYYY-MM-DD");

    $scope.activeUser = this.user ? this.user : $scope.activeUser;
    if (!$scope.activeUser)
      $scope.activeUser = $scope.users[0];

    User.systems($scope.activeUser.id, start, end, $scope.systemType).success(function(data){
      $scope.activeSystems = data.systems;
    });
  }

partial.html

        <div class='btn'>
            <i class='icon-calendar'></i>
            <span
                date-range-picker
                options='dateRangeOptions'
                change='loadUserSystems(start, end)'></span>
        </div>

  <div
    class='btn'
    date-range-picker
    change='loadUserSystems(start, end)'
    options='dateRangeOptions'></div>

指令.js

directives.directive('dateRangePicker', function ($parse) {
  return {
    restrict: 'A',
    scope: {
      options: '=',
    },
    template: "<span></span> <b class='caret'></b>",
    link: function (scope, element, attr) {
      $(element).daterangepicker(scope.options, function(start, end){
        $(element).find('span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

        // Retrieve the callback function
        var fn = $parse(attr.change);

        scope.$apply(function () {
          fn(scope, { start: start, end: end });
        });
      });

      $(element).find('span').html(moment().format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
    }
  };
});

directives.directive('dateRangePicker', ['$window', function ($window) {
  return {
    restrict: 'A',
    scope: {
      options: '=',
      change: '&'
    },
    template: "<span></span><b class='caret'></b>",
    link: function (scope, element, attr) {
      $(element).daterangepicker(scope.options, function(start, end){
        $(element).find('span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

        scope.$apply(function () {
          scope.change({ start: start, end: end });
        });
      });

      $(element).find('span').html($window.moment().format('MMMM D, YYYY') + ' - ' + $window.moment().format('MMMM D, YYYY'));
    }
  };
}]);

指令（'dateRangePicker'，函数（$parse）{ 返回{ 限制：“A”， 范围：{ 选项：“=”， }, 模板：“”， 链接：功能（范围、元素、属性）{ $（元素）.daterangepicker（scope.options，函数（开始，结束）{ $（element）.find（'span'）.html（start.format（'MMMM D，YYYY'）+'-'+end.format（'MMMM D，YYYY'））； //检索回调函数 var fn=$parse（属性更改）； 作用域：$apply（函数（）{ fn（作用域，{start:start，end:end}）； }); }); $（element）.find（'span'）.html（矩（）.format（'MMMM D，YYYY'）+'-'+矩（）.format（'MMMM D，YYYY'））； } }; }); 试试这个：

directives.directive('dateRangePicker', ['$window', function ($window) {
  return {
    restrict: 'A',
    scope: {
      options: '=',
      onChange: '&change'
    },
    template: "<span></span> <b class='caret'></b>",
    link: function (scope, element, attr) {
      $(element).daterangepicker(scope.options, function(start, end){
        $(element).find('span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

        scope.$apply(function () {
          scope.onChange({ start: start, end: end });
        });
      });

      $(element).find('span').html($window.moment().format('MMMM D, YYYY') + ' - ' + $window.moment().format('MMMM D, YYYY'));
    }
  };
}]);

指令（'dateRangePicker'，['$window'，函数（$window）{ 返回{ 限制：“A”， 范围：{ 选项：“=”， onChange:“&change” }, 模板：“”， 链接：功能（范围、元素、属性）{ $（元素）.daterangepicker（scope.options，函数（开始，结束）{ $（element）.find（'span'）.html（start.format（'MMMM D，YYYY'）+'-'+end.format（'MMMM D，YYYY'））； 作用域：$apply（函数（）{ onChange（{start:start，end:end}）； }); }); $（element）.find（'span'）.html（$window.moment（）.format（'MMMM D，YYYY'）+'-'+$window.moment（）.format（'MMMM D，YYYY'））； } }; }]); 此外，上面假定

moment（）

在窗口上。您可以了解有关在父作用域上下文中执行表达式的更多信息

---

编辑修复一次更改呼叫。

多亏了Rcherry提供的解决方案，我能够进行一些修改，使其适合我

供应商：

• 矩.js
• jQuery

指令.js

directives.directive('dateRangePicker', function ($parse) {
  return {
    restrict: 'A',
    scope: {
      options: '=',
    },
    template: "<span></span> <b class='caret'></b>",
    link: function (scope, element, attr) {
      $(element).daterangepicker(scope.options, function(start, end){
        $(element).find('span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

        // Retrieve the callback function
        var fn = $parse(attr.change);

        scope.$apply(function () {
          fn(scope, { start: start, end: end });
        });
      });

      $(element).find('span').html(moment().format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
    }
  };
});

directives.directive('dateRangePicker', ['$window', function ($window) {
  return {
    restrict: 'A',
    scope: {
      options: '=',
      change: '&'
    },
    template: "<span></span><b class='caret'></b>",
    link: function (scope, element, attr) {
      $(element).daterangepicker(scope.options, function(start, end){
        $(element).find('span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

        scope.$apply(function () {
          scope.change({ start: start, end: end });
        });
      });

      $(element).find('span').html($window.moment().format('MMMM D, YYYY') + ' - ' + $window.moment().format('MMMM D, YYYY'));
    }
  };
}]);

partial.html

        <div class='btn'>
            <i class='icon-calendar'></i>
            <span
                date-range-picker
                options='dateRangeOptions'
                change='loadUserSystems(start, end)'></span>
        </div>

  <div
    class='btn'
    date-range-picker
    change='loadUserSystems(start, end)'
    options='dateRangeOptions'></div>

Wow-ty！我对此感到非常沮丧。我将发布我的完整示例作为不同的答案。我不明白为什么我的指令不起作用。我在change attr上尝试了“&”，并启动了该函数，但无法将参数传递给它。我看到您在这个指令的声明中使用了$window和$window.moment（）。是因为您将开始和结束传递给daterangepicker函数吗？@MichaelCalkins我的错，我错过了onChange调用前面的一个

范围。

，但看起来您在后续操作中发现了这一点。使用

$window

实际上只是个人偏好，因为

moment（）

已经在全局范围内。