Угловая директива: как присвоить значение родительской области?

Question

У меня есть контроллер AppCtrl, как

scope.transaction = {} 

Индекс выглядит

<div class="control-group"> 
    <label class="control-label">Date</label> 

    <div class="controls"> 
     <div class="control-group input-append date form_datetime"> 
     <date-time-picker data-ng-model="transaction.date"></date-time-picker> 
     </div> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label">Amount</label> 

    <div class="controls"> 
     <div class="input-append"> 
     <input type="text" name="transactionAmount" ng-model="transaction.amount" required> 
     </div> 

и мой заказ директива выглядит

angular.module('customDirectives', []).directive('dateTimePicker', function() { 
     return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      transaction['date']: '=' # COMPILATION ERROR HERE 
     }, 
     template: '<div class="control-group input-append date form_datetime">'+ 
      '<input type="text" readonly data-date-format="yyyy-mm-dd hh:ii" name="transactionDate" ng-model="transaction.date" data-date-time required>'+ 
      '<span class="add-on"><em class="icon-remove"></em></span>'+ 
      '<span class="add-on"><em class="icon-th"></em></span>'+ 
      '</div>', 
     link: function(scope, element, attrs, ngModel) { 
      var input = element.find('input'); 

      element.datetimepicker({ 
      format: "yyyy-mm-ddThh:ii:ssZ", 
      showMeridian: true, 
      autoclose: true, 
      todayBtn: true, 
      pickerPosition: 'bottom-left' 
      }); 

      element.bind('blur keyup change', function(){ 
      console.log('binding element'); 
      scope.$apply(date); 
      }); 

      function date() { 
      console.log('setting date',input.val()); 
      scope.ngModel = input.val(); 
      } 

      date(); // initialize 
     } 
     } 
    }); 

Я хочу, чтобы присвоить значение даты из моей директивы $scope.transaction.date, но это ошибка как ошибка компиляции, как я могу это достичь?

Answer 1

scope: { 
     transaction['date']: '=' # COMPILATION ERROR HERE 
    }, 

Должно быть

scope: { 
     transactionDate: '=' 
    }, 

И

<date-time-picker data-ng-model="transaction.date"></date-time-picker> 

Должно быть

<date-time-picker transaction-date="transaction.date"></date-time-picker> 

Тогда в вашей директивы вы можете вызвать scope.transactionDate = MyValue;

в пределах. $ Apply();

EDIT: Если вы хотите использовать нг-модель в вашей директиве, то вы можете использовать

.... 
restrict: 'E', 
require: '?ngModel', 
.... 

И

controller.$setViewValue(value); //this will in directive code where you want set the value of the ng-model bound variable. 

В Html

<date-time-picker data-ng-model="transaction.date"></date-time-picker>