ng-directives

directive.js

angular.module('directivlor', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ui.router'
])

//contenteditable data two-way bind
.directive('contenteditable', ['$sce', function ($sce) {
  return {
    restrict: 'A',
    require: '?ngModel', // get a hold of NgModelController
    link: function (scope, element, attrs, ngModel) {
      if (!ngModel) return; // do nothing if no ng-model

      // Specify how UI should be updated
      ngModel.$render = function () {
        element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
      };

      // Listen for change events to enable binding
      element.on('blur keyup change', function () {
        scope.$apply(read);
      });
      //read(); // initialize

      // Write data to the model
      function read() {
        var html = element.html();
        // When we clear the content editable the browser leaves a <br> behind
        // If strip-br attribute is provided then we strip this out
        if (attrs.stripBr) {
          html = html.replace(/\<br\>/g, '');
        }
        ngModel.$setViewValue(html);
      }
    }
  };
}])

//非html5模式处理链接方法
.directive('linkTo',['$location',function($location){
  return function(scope,element,attrs){
    element.on('click',function(){
      $location.path(attrs.linkTo);
      scope.$apply();
    })
  }
}])

//不用ngTouch时的替代方案
.directive('ngTap',function(){
  return function($scope, $element, $attributes) {
    var tapped;
    tapped = false;
    $element.bind("click", function() {
      if (!tapped) {
        return $scope.$apply($attributes["ngTap"]);
      }
    });
    $element.bind("touchstart", function(event) {
      return tapped = true;
    });
    $element.bind("touchmove", function(event) {
      tapped = false;
      return event.stopImmediatePropagation();
    });
    return $element.bind("touchend", function() {
      if (tapped) {
        return $scope.$apply($attributes["ngTap"]);
      }
    });
  };
})

//阻止ios下到头后的弹性拉动
.directive('phScroll', ['$document','$rootScope',function ($document,$rootScope) {

  return function (scope, element, attrs) {
    function lock(element){
      var scrolling = false;
      $document.on('touchmove',function(e){
        e.preventDefault();
      })
      element.on('touchstart',function(e) {
        // Only execute the below code once at a time
        if (!scrolling) {
          scrolling = true;
          if (e.currentTarget.scrollTop === 0) {
            e.currentTarget.scrollTop = 1;
          } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
            e.currentTarget.scrollTop -= 1;
          }
          scrolling = false;
        }
      })
      element.on('touchmove',function(e) {
        if(element[0].scrollHeight > element[0].clientHeight) {
          e.stopPropagation();
        }
      });
      element.on('$destroy', function() {
        unLock(element);
      });
    }

    function unLock(element){
      element.off('touchstart');
      element.off('touchmove');
    }

    if(attrs['phScroll']=='on'||attrs['phScroll']=='img'){
      lock(element);
    }else{
      $rootScope.$on('lockPage',function(){
        lock(element);
      })
      $rootScope.$on('unLockPage',function(){
        unLock(element);
      })
    }
  }
}])

//配合css 解决页面加载时的css transition bug
.directive('preload', ['$document', function ($document) {
  return {
    restrict: 'C',
    link: function (scope, element, attrs) {
      $document.ready(function () {
        element.removeClass('preload');
      })
    }
  }
}])