Предотвращение обратной передачи из Угловой директивы

Question

У меня есть якорь runat="server", который имеет __doPostBack в href.

Я хотел бы подтвердить, что другое поле было заполнено при щелчке якоря и разрешить только обратный вызов, если поле не пустое.

Я добавил пользовательскую директиву справиться с этим, которая выглядит следующим образом:

angular.module('app').directive('notEmpty', function ($timeout, $document) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      element.bind('click', function (event) { 

       return $timeout(function() { 
        var elementToCheckNotEmpty = $document[0].querySelector(attrs.notEmpty); 

        if (!elementToCheckNotEmpty.value) { 
         scope.addInvalidClass = true; // input has an ng-class binding to $scope.addInvalidClass 
         event.preventDefault(); 
         event.stopPropagation(); 

         return false; 
        } 
       }); 
      }); 
     } 
    } 
}); 

Это не препятствует постбэку. Обновление свойства scope и добавление класса к вводу работает, потому что я вижу недействительный класс, применяемый на пару секунд, пока происходит обратная передача.

Я понимаю, что $timeout возвращает обещание, поэтому я попытался соединить последовательно затем на $timeout как так:

return $timeout(function() { 
    var elementToCheckNotEmpty = $document[0].querySelector(attrs.omwNotEmpty); 

    if (!elementToCheckNotEmpty.value) { 
     scope.addInvalidClass = true; 
    } 
}).then(function() { 
    if (scope.addInvalidClass) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     return false; 
    } 
}); 

Но это не препятствует постбэк либо. Это проект webforms с общей мастер-страницей, поэтому я не могу реально обновить элемент form без потенциального влияния на многие другие страницы. Форма имеет пустой атрибут action. Кроме того, атрибут ng-controller находится на элементе внутриform элемент, не уверен, если это делает разницу ...

Что я делаю неправильно? Я очень новичок в Angular btw, так извиняюсь, если это тривиально!

Answer 1

Использование $ timeout добавляет функцию в асинхронную очередь, тем самым не препятствуя обратной передаче. И привязка не изменяется, если не используется $ timeout, поскольку клик не находится в цикле углового дайджеста. Вместо $ timeout включайте изменения области с областью. $ Apply() или вы можете просто использовать ng-click вместо element.bind.