AngularJS

Question

我有一个带有动画占位符的表单；由指令驱动 (hasfocus) 这会绑定模糊、更改和焦点事件。这工作正常但是当我重置表单时视图不更新，我期待更改事件触发。

如果您输入文本并单击登录，文本将被删除，但活动的 class 不会从标签中删除。

控制器

$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 - 重置表格

AngularJS - reset form

javascript

angularjs-directive

控制器

指令