2015-09-11 3 views
0

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

Ниже мой код

app.directive('datetimez', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, element, attrs, ngModelCtrl) { 
      element.datetimepicker({ 
       dateFormat: 'dd-mm-yyyy' 
      }).on('changeDate', function (e) { 
       changedate(); 
       //ngModelCtrl.$setViewValue(e.date); 
       //scope.$apply(); 
      }); 
     } 
    }; 
}); 

Контроллер:

app.controller('GetIncidentcnt', function ($scope) { 

    $scope.changedate = function() { 
     alert('Hi#####fromdate'); 
    } 
}); 

HTML:

<div id="date" class="input-append" datetimez ng-model="var1"> 
    <input data-format="dd-MM-yyyy" type="text" id="input1" data-date-start-date="+0d" name="input1"></input> 
    <span class="add-on"> 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> 
    </span> 
</div> 

Я хочу назвать changedate() из функции директивного

ответ

3

Как вы можете иметь дело где вам нужно использовать его несколько раз на своей странице. В этом случае вызов метода контроллера из директивы будет запутан, если вы хотите вызвать другой метод на каждом datepicker.

Поэтому я предлагаю вам использовать изолированный scope, чтобы сделать многоразовый компонент. Для этого вам нужно добавить scope: { onChange: '&' },, который предоставит директиву, используя & (который указывает на выполняемое выражение), добавив в свой элемент директивы атрибут on-change, который предоставит контракт на метод контроллера.

Markup

<div id="date" class="input-append" datetimez ng-model="var1" on-change="changedate()"> 

Директива

app.directive('datetimez', function() { 
     return { 
      restrict: 'A', 
      scope: { 
       onChange: '&' 
      }, 
      require: 'ngModel', 
      link: function (scope, element, attrs, ngModelCtrl) { 
       element.datetimepicker({ 
        dateFormat: 'dd-mm-yyyy' 
       }).on('changeDate', function (e) { 
        //to run digest cycle to.. 
        scope.$apply(function(){ 
         scope.onChange(); 
        }) 

       }); 
      } 
     }; 
    }); 
+0

У вас еще есть 'на клик 'в примере разметки; это должно быть 'on-change'. –

+0

@JackA. спасибо mate .. Я забыл, что атрибут для изменения –

1

ProVi динь директива объявляется в области видимости контроллера (в шаблоне) нужно просто ссылаться на метод на унаследованной scope объекте директивы, поскольку в качестве аргумента link метода:

link: function (scope, element, attrs, ngModelCtrl) { 
    element.datetimepicker({ 
     dateFormat: 'dd-mm-yyyy' 
    }).on('changeDate', function (e) { 
     scope.changedate(); 
//  ^^^^^ 
    }); 
} 
+0

после вызова контроллера method..you необходимо запустить переваривать цикл вручную, чтобы увидеть эффект .. –