Question

我有一个带有动画占位符的表单;由指令（ hasfocus ）驱动，这会绑定模糊，更改和聚焦事件。这工作正常但是当我重置窗体时视图没有更新，我期待触发更改事件。

如果您输入文字并单击登录，则会删除该文本，但不会从标签中删除活动的类。

控制器

$scope.send = function(){
    //1. ajax to send data
    //2. if response is true reset form... 
    $scope.password = "";
    $scope.username = "";
};

指令

app.directive('hasfocus', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('blur', function() {
          if(!element[0].value){
            element.parent().find('label').removeClass('active');
          }
      });
      element.bind('change', function() {
          if(!element[0].value){
            element.parent().find('label').removeClass('active');
          }
      });
      element.bind('focus', function() {
        element.parent().find('label').addClass('active');
      });
    }
  };
});

JSFiddle

谢谢

Answer 1

请考虑对您的示例进行以下更改：

使用<form>代码作为登录部分
重置表单时，请在表单上调用.$setPristine()以重置脏标志。

可以在AngularjsHub

上找到表单重置的工作示例

Answer 2

我为您提供了working solution，对您的代码进行了少量更改。首先，您需要从控制器发送一个事件来通知指令：

$scope.$broadcast('remove.class');

然后，在指令中，您将听取该事件并采取行动：

//private function
function removeClass(element){
    element.parent().find('label').removeClass('active');
}

//when remove.class event is broadcast from controller, the fn() will be triggered
scope.$on('remove.class', function(){
    removeClass(element);
});

AngularJS - 重置表单

控制器

指令

2 个答案: