Как получить доступ к моей области angular с помощью диалоговых кнопок jQuery?

Я использую диалог jQuery и хочу использовать диалоговые кнопки, но я не знаю, как попасть в область действия, чтобы вызвать (в настоящее время несуществующий) вызов $http или $resource на сервер с помощью обновленная модель при нажатии кнопки диалога jQuery. Мне кажется, что я собираюсь сделать это неправильно, но я не знаю, в каком направлении идти здесь.

Ответы

Ответ 1

Вы можете использовать функции Angular, чтобы найти область, прикрепленную к элементу, и вызвать на ней функцию. Я предпочитаю действительно абстрагировать его и находить корень ng-app и транслировать событие в приложение, чтобы внешний код не знал о специфике внутреннего кода, кроме события, которое вы транслировали.

angular.$externalBroadcast = function (selector, event, message) {
    var scope = angular.element(selector).scope();

    scope.$apply(function () {
        scope.$broadcast(event, message);
    });
};

Затем из любого кода вы можете вызвать что-то вроде:

angular.$externalBroadcast('#app-container', 'doSomething', parameters);

И внутри приложения я бы сделал что-то вроде этого:

$rootScope.$on('doSomething', function(parameters) {
    // handle the external event.
});

Если вам не нравится этот подход, просто получите область действия:

var scope = angular.element(selector).scope();

И сделай что-нибудь с этим. Просто убедитесь, что вы вызываете scope.$apply, иначе цикл пищеварения не произойдет.

Ответ 2

Лучший способ - добавить директиву в управление. Плохая идея добавить jQuery с угловыми сторонами. Директива сделана для такого рода манипуляций.

Здесь я изменил ваш plunkr, чтобы показать вам, что вы можете делать с директивами.

app.directive('date', function() {
  return {
     restrict: 'A',
     require: '^ngModel',
     link: function(scope, elm, attrs, ctrl) {
       var dp = $(elm);

       dp.datepicker({
         onSelect: function(dateText) {
           scope.$apply(function() { // Apply cause it is outside angularjs
            ctrl.$setViewValue(dateText); // Set new value of datepicker to scope
           });
        }
       });

       scope.$watch(attrs.ngModel, function(nv) {
         dp.datepicker('setDate', nv); // Update datePicker date when scope change
       });
     }
  }