• required和ng-required的作用

  当提交的表单时，通常都会做一些表单验证，当然也避免不了空值的检测。在angular里可以给input，select等设置required属性来对表单进行验证，不用自己再花时间去写验证。

• 例如我们需要验证name名为myFrom下的userName文本框是否为空，我们可以给文本框设置required属性，然后通过myForm.userName.$error.required来获取验证结果。

  <form name="myForm">
    User name: <input type="text" name="userName" required>
    <span class="error" ng-show="myForm.userName.$error.required">Required!</span>
  </form>
  

• 也可以设置ng-required来进行验证设置，ng-required跟required的区别是前者可以通过设置一些表达式来判断是否需要验证。

  <javascript>
    scope.userName = {name: 'zhangsan', validate: true}
  </javascript>
  <form name="myForm">
    User name: <input type="text" name="userName" ng-required="userName.validate">
    <span class="error" ng-show="myForm.userName.$error.required">Required!</span>
  </form>
  

使用AngularJs开发项目的同学应该对watch很熟悉了，在项目中难免会用到watch来监听scope中值的变化来执行相应的操作.

• $watch的常规使用：

  scope.name = 'aa';
  scope.$watch('aa', function(newVal, oldVal){
     //执行相应操作
  });
  

• 特殊使用，因为watch可以用来监听一个函数，所以当我们需要每次执行$digest()都执行一个操作（即scope发生变化的时候），这是我们就可以把第一个参数设置成一个我们需要每次都执行的函数。

  scope.$watch(function(){
     //每次都需要执行的操作
  });
  

用 angular 做公司的一个内部系统时，自己写了一个公用的 Dialog directive, 但是遇到一个问题：注册到一个button上的ng-click事件上的方法莫名其妙的总是点击一次执行两次，都快把我郁闷死了，不过问题到最后总是能找到原因并且解决的。下面我就说下为什么会出现这种问题。

• 问题所在

  • 问题出现在我使用了$compile去编译了一些后加入到template中的element。但是我为了偷懒把真个template都compile了一次，这时候template中的一些元素等于被compile了两次，只要是被compile了两次的元素，在其上面注册事件都会被执行两次。

• 如何解决

  • 方法一：只compile后加入模板的元素(也就是没有编译过的元素)
  • 方法二：在preLink中完成对新元素的加入，因为这时候文章template都还么执行compile, 相加什么就加什么，加完之后，angular会自动把真个template compile 一次。

• 总结

  • $compile虽强大，但还需谨慎。