AngularJS: Как вы возвращаете переменные или изменяете $ scope из директивы?

Question

Я не могу на всю жизнь получить «начало варсов» и «конец», чтобы вернуться к моей функции в моем контроллере.

л() == console.log()

Я пытаюсь превратить это: http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/

В директиве для этого: https://github.com/clouddueling/angularjs-common

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 
    } 
}); 

partial.html

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

directive.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')); 
    } 
    }; 
}); 

Answer 1

Попробуйте это:

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')); 
    } 
    }; 
}]); 

Кроме того, выше, предполагает moment() на окне. Вы можете узнать больше о выполнении выражений в контексте родительской области here.

Редактировать Фиксация onChange call.

Answer 2

Благодаря rtcherry для его решения я смог сделать пару модов, чтобы заставить его работать для меня.

Поставщики:

• Moment.js
• JQuery

directive.js

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')); 
    } 
    }; 
}]); 

controller.js

$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' 
    date-range-picker 
    change='loadUserSystems(start, end)' 
    options='dateRangeOptions'></div>