深究AngularJS中ng-drag、ng-drop的用法

1.相关地址:

插件下载:https://github.com/fatlinesofcode/ngDraggable/blob/master/ngDraggable.js

2.讲解

<div ng-drop="true" ng-drop-success="dropComplete($index,$data,$event)" ng-repeat="item in content">
  <li ng-drag="true" ng-drag-data="item" >
    姓名:{{item.name}},年龄:{{item.age}}
  </li>
</div>

ng-drag : 表示该元素能够被拖动

ng-drag-data : 表示拖动元素时跟着被拖走的数据

ng-drop : 表示该元素内可放置被拖动的元素

ng-drop-success : 放置在ngd-drop所在元素里后触发,一般写事件.

ng-drop-success触发的dropComplete方法的参数说明:

  1. $index : 表示拖动的数据所落的元素的下标
  2. $data : 被拖动的数据对象

3.拖拽排序示例

页面代码

<div ng-drop="true" ng-drop-success="dropComplete($index,$data)" ng-repeat="item in content">
  <li ng-drag="true" ng-drag-data="item" >
    姓名:{{item.name}},年龄:{{item.age}}
  </li>
</div>

js代码

//数据
$scope.content = [{'name':'张春玲','age':28},{'name':'王晰','age':26},{'name':'吴正青','age':66}];

/** 拖拽成功触发方法
*  index 拖拽后落下时的元素的序号(下标)
*  obj被拖动数据对象
*/
$scope.dropComplete = function(index, obj){
    //重新排序
    var idx = $scope.content.indexOf(obj);
    $scope.content.splice(idx,1);
    $scope.content.splice(index,0,obj);  

};

4.拖拽交换示例

页面代码

<div ng-drop="true" ng-drop-success="dropComplete($index,$data)" ng-repeat="item in content">
  <li ng-drag="true" ng-drag-data="item" >
    姓名:{{item.name}},年龄:{{item.age}}
  </li>
</div>

JS代码

//数据
$scope.content = [{'name':'张春玲','age':28},{'name':'王晰','age':26},{'name':'吴正青','age':66}];

/** 拖拽成功触发方法
*  index 拖拽后落下时的元素的序号(下标)
*  obj 被拖动数据对象
*/
$scope.dropComplete = function(index, obj){
    var idx = $scope.content.indexOf(obj);
    $scope.content[idx] = $scope.content[index];
    $scope.content[index] = obj;
};

5. ngDraggable插件代码

/*
 *
 * https://github.com/fatlinesofcode/ngDraggable
 */
angular.module("ngDraggable", [])
  .service('ngDraggable', [function() {

    var scope = this;
    scope.inputEvent = function(event) {
      if (angular.isDefined(event.touches)) {
        return event.touches[0];
      }
      //Checking both is not redundent. If only check if touches isDefined, angularjs isDefnied will return error and stop the remaining scripty if event.originalEvent is not defined.
      else if (angular.isDefined(event.originalEvent) && angular.isDefined(event.originalEvent.touches)) {
        return event.originalEvent.touches[0];
      }
      return event;
    };

  }])
  .directive('ngDrag', ['$rootScope', '$parse', '$document', '$window', 'ngDraggable', function ($rootScope, $parse, $document, $window, ngDraggable) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        scope.value = attrs.ngDrag;
        var offset,_centerAnchor=false,_mx,_my,_tx,_ty,_mrx,_mry;
        var _hasTouch = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
        var _pressEvents = 'touchstart mousedown';
        var _moveEvents = 'touchmove mousemove';
        var _releaseEvents = 'touchend mouseup';
        var _dragHandle;

        // to identify the element in order to prevent getting superflous events when a single element has both drag and drop directives on it.
        var _myid = scope.$id;
        var _data = null;

        var _dragOffset = null;

        var _dragEnabled = false;

        var _pressTimer = null;

        var onDragStartCallback = $parse(attrs.ngDragStart) || null;
        var onDragStopCallback = $parse(attrs.ngDragStop) || null;
        var onDragSuccessCallback = $parse(attrs.ngDragSuccess) || null;
        var allowTransform = angular.isDefined(attrs.allowTransform) ? scope.$eval(attrs.allowTransform) : true;

        var getDragData = $parse(attrs.ngDragData);

        // deregistration function for mouse move events in $rootScope triggered by jqLite trigger handler
        var _deregisterRootMoveListener = angular.noop;

        var initialize = function () {
          element.attr('draggable', 'false'); // prevent native drag
          // check to see if drag handle(s) was specified
          // if querySelectorAll is available, we use this instead of find
          // as JQLite find is limited to tagnames
          if (element[0].querySelectorAll) {
            var dragHandles = angular.element(element[0].querySelectorAll('[ng-drag-handle]'));
          } else {
            var dragHandles = element.find('[ng-drag-handle]');
          }
          if (dragHandles.length) {
            _dragHandle = dragHandles;
          }
          toggleListeners(true);
        };

        var toggleListeners = function (enable) {
          if (!enable)return;
          // add listeners.

          scope.$on('$destroy', onDestroy);
          scope.$watch(attrs.ngDrag, onEnableChange);
          scope.$watch(attrs.ngCenterAnchor, onCenterAnchor);
          // wire up touch events
          if (_dragHandle) {
            // handle(s) specified, use those to initiate drag
            _dragHandle.on(_pressEvents, onpress);
          } else {
            // no handle(s) specified, use the element as the handle
            element.on(_pressEvents, onpress);
          }
          if(! _hasTouch && element[0].nodeName.toLowerCase() == "img"){
            element.on('mousedown', function(){ return false;}); // prevent native drag for images
          }
        };
        var onDestroy = function (enable) {
          toggleListeners(false);
        };
        var onEnableChange = function (newVal, oldVal) {
          _dragEnabled = (newVal);
        };
        var onCenterAnchor = function (newVal, oldVal) {
          if(angular.isDefined(newVal))
            _centerAnchor = (newVal || 'true');
        };

        var isClickableElement = function (evt) {
          return (
            angular.isDefined(angular.element(evt.target).attr("ng-cancel-drag"))
          );
        };
        /*
         * When the element is clicked start the drag behaviour
         * On touch devices as a small delay so as not to prevent native window scrolling
         */
        var onpress = function(evt) {
          if(! _dragEnabled)return;

          if (isClickableElement(evt)) {
            return;
          }

          if (evt.type == "mousedown" && evt.button != 0) {
            // Do not start dragging on right-click
            return;
          }

          if(_hasTouch){
            cancelPress();
            _pressTimer = setTimeout(function(){
              cancelPress();
              onlongpress(evt);
            },100);
            $document.on(_moveEvents, cancelPress);
            $document.on(_releaseEvents, cancelPress);
          }else{
            onlongpress(evt);
          }

        };

        var cancelPress = function() {
          clearTimeout(_pressTimer);
          $document.off(_moveEvents, cancelPress);
          $document.off(_releaseEvents, cancelPress);
        };

        var onlongpress = function(evt) {
          if(! _dragEnabled)return;
          evt.preventDefault();

          offset = element[0].getBoundingClientRect();
          if(allowTransform)
            _dragOffset = offset;
          else{
            _dragOffset = {left:document.body.scrollLeft, top:document.body.scrollTop};
          }

          element.centerX = element[0].offsetWidth / 2;
          element.centerY = element[0].offsetHeight / 2;

          _mx = ngDraggable.inputEvent(evt).pageX;//ngDraggable.getEventProp(evt, 'pageX');
          _my = ngDraggable.inputEvent(evt).pageY;//ngDraggable.getEventProp(evt, 'pageY');
          _mrx = _mx - offset.left;
          _mry = _my - offset.top;
          if (_centerAnchor) {
            _tx = _mx - element.centerX - $window.pageXOffset;
            _ty = _my - element.centerY - $window.pageYOffset;
          } else {
            _tx = _mx - _mrx - $window.pageXOffset;
            _ty = _my - _mry - $window.pageYOffset;
          }

          $document.on(_moveEvents, onmove);
          $document.on(_releaseEvents, onrelease);
          // This event is used to receive manually triggered mouse move events
          // jqLite unfortunately only supports triggerHandler(...)
          // See http://api.jquery.com/triggerHandler/
          // _deregisterRootMoveListener = $rootScope.$on('draggable:_triggerHandlerMove', onmove);
          _deregisterRootMoveListener = $rootScope.$on('draggable:_triggerHandlerMove', function(event, origEvent) {
            onmove(origEvent);
          });
        };

        var onmove = function (evt) {
          if (!_dragEnabled)return;
          evt.preventDefault();

          if (!element.hasClass('dragging')) {
            _data = getDragData(scope);
            element.addClass('dragging');
            $rootScope.$broadcast('draggable:start', {x:_mx, y:_my, tx:_tx, ty:_ty, event:evt, element:element, data:_data});

            if (onDragStartCallback ){
              scope.$apply(function () {
                onDragStartCallback(scope, {$data: _data, $event: evt});
              });
            }
          }

          _mx = ngDraggable.inputEvent(evt).pageX;//ngDraggable.getEventProp(evt, 'pageX');
          _my = ngDraggable.inputEvent(evt).pageY;//ngDraggable.getEventProp(evt, 'pageY');

          if (_centerAnchor) {
            _tx = _mx - element.centerX - _dragOffset.left;
            _ty = _my - element.centerY - _dragOffset.top;
          } else {
            _tx = _mx - _mrx - _dragOffset.left;
            _ty = _my - _mry - _dragOffset.top;
          }

          moveElement(_tx, _ty);

          $rootScope.$broadcast('draggable:move', { x: _mx, y: _my, tx: _tx, ty: _ty, event: evt, element: element, data: _data, uid: _myid, dragOffset: _dragOffset });
        };

        var onrelease = function(evt) {
          if (!_dragEnabled)
            return;
          evt.preventDefault();
          $rootScope.$broadcast('draggable:end', {x:_mx, y:_my, tx:_tx, ty:_ty, event:evt, element:element, data:_data, callback:onDragComplete, uid: _myid});
          element.removeClass('dragging');
          element.parent().find('.drag-enter').removeClass('drag-enter');
          reset();
          $document.off(_moveEvents, onmove);
          $document.off(_releaseEvents, onrelease);

          if (onDragStopCallback ){
            scope.$apply(function () {
              onDragStopCallback(scope, {$data: _data, $event: evt});
            });
          }

          _deregisterRootMoveListener();
        };

        var onDragComplete = function(evt) {

          if (!onDragSuccessCallback )return;

          scope.$apply(function () {
            onDragSuccessCallback(scope, {$data: _data, $event: evt});
          });
        };

        var reset = function() {
          if(allowTransform)
            element.css({transform:'', 'z-index':'', '-webkit-transform':'', '-ms-transform':''});
          else
            element.css({'position':'',top:'',left:''});
        };

        var moveElement = function (x, y) {
          if(allowTransform) {
            element.css({
              transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, ' + x + ', ' + y + ', 0, 1)',
              'z-index': 99999,
              '-webkit-transform': 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, ' + x + ', ' + y + ', 0, 1)',
              '-ms-transform': 'matrix(1, 0, 0, 1, ' + x + ', ' + y + ')'
            });
          }else{
            element.css({'left':x+'px','top':y+'px', 'position':'fixed'});
          }
        };
        initialize();
      }
    };
  }])

  .directive('ngDrop', ['$parse', '$timeout', '$window', '$document', 'ngDraggable', function ($parse, $timeout, $window, $document, ngDraggable) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        scope.value = attrs.ngDrop;
        scope.isTouching = false;

        var _lastDropTouch=null;

        var _myid = scope.$id;

        var _dropEnabled=false;

        var onDropCallback = $parse(attrs.ngDropSuccess);// || function(){};

        var onDragStartCallback = $parse(attrs.ngDragStart);
        var onDragStopCallback = $parse(attrs.ngDragStop);
        var onDragMoveCallback = $parse(attrs.ngDragMove);

        var initialize = function () {
          toggleListeners(true);
        };

        var toggleListeners = function (enable) {
          // remove listeners

          if (!enable)return;
          // add listeners.
          scope.$watch(attrs.ngDrop, onEnableChange);
          scope.$on('$destroy', onDestroy);
          scope.$on('draggable:start', onDragStart);
          scope.$on('draggable:move', onDragMove);
          scope.$on('draggable:end', onDragEnd);
        };

        var onDestroy = function (enable) {
          toggleListeners(false);
        };
        var onEnableChange = function (newVal, oldVal) {
          _dropEnabled=newVal;
        };
        var onDragStart = function(evt, obj) {
          if(! _dropEnabled)return;
          isTouching(obj.x,obj.y,obj.element);

          if (attrs.ngDragStart) {
            $timeout(function(){
              onDragStartCallback(scope, {$data: obj.data, $event: obj});
            });
          }
        };
        var onDragMove = function(evt, obj) {
          if(! _dropEnabled)return;
          isTouching(obj.x,obj.y,obj.element);

          if (attrs.ngDragMove) {
            $timeout(function(){
              onDragMoveCallback(scope, {$data: obj.data, $event: obj});
            });
          }
        };

        var onDragEnd = function (evt, obj) {

          // don't listen to drop events if this is the element being dragged
          // only update the styles and return
          if (!_dropEnabled || _myid === obj.uid) {
            updateDragStyles(false, obj.element);
            return;
          }
          if (isTouching(obj.x, obj.y, obj.element)) {
            // call the ngDraggable ngDragSuccess element callback
            if(obj.callback){
              obj.callback(obj);
            }

            if (attrs.ngDropSuccess) {
              $timeout(function(){
                onDropCallback(scope, {$data: obj.data, $event: obj, $target: scope.$eval(scope.value)});
              });
            }
          }

          if (attrs.ngDragStop) {
            $timeout(function(){
              onDragStopCallback(scope, {$data: obj.data, $event: obj});
            });
          }

          updateDragStyles(false, obj.element);
        };

        var isTouching = function(mouseX, mouseY, dragElement) {
          var touching= hitTest(mouseX, mouseY);
          scope.isTouching = touching;
          if(touching){
            _lastDropTouch = element;
          }
          updateDragStyles(touching, dragElement);
          return touching;
        };

        var updateDragStyles = function(touching, dragElement) {
          if(touching){
            element.addClass('drag-enter');
            dragElement.addClass('drag-over');
          }else if(_lastDropTouch == element){
            _lastDropTouch=null;
            element.removeClass('drag-enter');
            dragElement.removeClass('drag-over');
          }
        };

        var hitTest = function(x, y) {
          var bounds = element[0].getBoundingClientRect();// ngDraggable.getPrivOffset(element);
          x -= $document[0].body.scrollLeft + $document[0].documentElement.scrollLeft;
          y -= $document[0].body.scrollTop + $document[0].documentElement.scrollTop;
          return x >= bounds.left
            && x <= bounds.right
            && y <= bounds.bottom
            && y >= bounds.top;
        };

        initialize();
      }
    };
  }])
  .directive('ngDragClone', ['$parse', '$timeout', 'ngDraggable', function ($parse, $timeout, ngDraggable) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        var img, _allowClone=true;
        var _dragOffset = null;
        scope.clonedData = {};
        var initialize = function () {

          img = element.find('img');
          element.attr('draggable', 'false');
          img.attr('draggable', 'false');
          reset();
          toggleListeners(true);
        };

        var toggleListeners = function (enable) {
          // remove listeners

          if (!enable)return;
          // add listeners.
          scope.$on('draggable:start', onDragStart);
          scope.$on('draggable:move', onDragMove);
          scope.$on('draggable:end', onDragEnd);
          preventContextMenu();

        };
        var preventContextMenu = function() {
          // element.off('mousedown touchstart touchmove touchend touchcancel', absorbEvent_);
          img.off('mousedown touchstart touchmove touchend touchcancel', absorbEvent_);
          // element.on('mousedown touchstart touchmove touchend touchcancel', absorbEvent_);
          img.on('mousedown touchstart touchmove touchend touchcancel', absorbEvent_);
        };
        var onDragStart = function(evt, obj, elm) {
          _allowClone=true;
          if(angular.isDefined(obj.data.allowClone)){
            _allowClone=obj.data.allowClone;
          }
          if(_allowClone) {
            scope.$apply(function () {
              scope.clonedData = obj.data;
            });
            element.css('width', obj.element[0].offsetWidth);
            element.css('height', obj.element[0].offsetHeight);

            moveElement(obj.tx, obj.ty);
          }

        };
        var onDragMove = function(evt, obj) {
          if(_allowClone) {

            _tx = obj.tx + obj.dragOffset.left;
            _ty = obj.ty + obj.dragOffset.top;

            moveElement(_tx, _ty);
          }
        };
        var onDragEnd = function(evt, obj) {
          //moveElement(obj.tx,obj.ty);
          if(_allowClone) {
            reset();
          }
        };

        var reset = function() {
          element.css({left:0,top:0, position:'fixed', 'z-index':-1, visibility:'hidden'});
        };
        var moveElement = function(x,y) {
          element.css({
            transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, '+x+', '+y+', 0, 1)', 'z-index': 99999, 'visibility': 'visible',
            '-webkit-transform': 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, '+x+', '+y+', 0, 1)',
            '-ms-transform': 'matrix(1, 0, 0, 1, '+x+', '+y+')'
            //,margin: '0' don't monkey with the margin,
          });
        };

        var absorbEvent_ = function (event) {
          var e = event;//.originalEvent;
          e.preventDefault && e.preventDefault();
          e.stopPropagation && e.stopPropagation();
          e.cancelBubble = true;
          e.returnValue = false;
          return false;
        };

        initialize();
      }
    };
  }])
  .directive('ngPreventDrag', ['$parse', '$timeout', function ($parse, $timeout) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        var initialize = function () {

          element.attr('draggable', 'false');
          toggleListeners(true);
        };

        var toggleListeners = function (enable) {
          // remove listeners

          if (!enable)return;
          // add listeners.
          element.on('mousedown touchstart touchmove touchend touchcancel', absorbEvent_);
        };

        var absorbEvent_ = function (event) {
          var e = event.originalEvent;
          e.preventDefault && e.preventDefault();
          e.stopPropagation && e.stopPropagation();
          e.cancelBubble = true;
          e.returnValue = false;
          return false;
        };

        initialize();
      }
    };
  }])
  .directive('ngCancelDrag', [function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.find('*').attr('ng-cancel-drag', 'ng-cancel-drag');
      }
    };
  }])
  .directive('ngDragScroll', ['$window', '$interval', '$timeout', '$document', '$rootScope', function($window, $interval, $timeout, $document, $rootScope) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var intervalPromise = null;
        var lastMouseEvent = null;

        var config = {
          verticalScroll: attrs.verticalScroll || true,
          horizontalScroll: attrs.horizontalScroll || true,
          activationDistance: attrs.activationDistance || 75,
          scrollDistance: attrs.scrollDistance || 15
        };

        var reqAnimFrame = (function() {
          return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
              window.setTimeout(callback, 1000 / 60);
            };
        })();

        var animationIsOn = false;
        var createInterval = function() {
          animationIsOn = true;

          function nextFrame(callback) {
            var args = Array.prototype.slice.call(arguments);
            if(animationIsOn) {
              reqAnimFrame(function () {
                $rootScope.$apply(function () {
                  callback.apply(null, args);
                  nextFrame(callback);
                });
              })
            }
          }

          nextFrame(function() {
            if (!lastMouseEvent) return;

            var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
            var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

            var scrollX = 0;
            var scrollY = 0;

            if (config.horizontalScroll) {
              // If horizontal scrolling is active.
              if (lastMouseEvent.clientX < config.activationDistance) {
                // If the mouse is on the left of the viewport within the activation distance.
                scrollX = -config.scrollDistance;
              }
              else if (lastMouseEvent.clientX > viewportWidth - config.activationDistance) {
                // If the mouse is on the right of the viewport within the activation distance.
                scrollX = config.scrollDistance;
              }
            }

            if (config.verticalScroll) {
              // If vertical scrolling is active.
              if (lastMouseEvent.clientY < config.activationDistance) {
                // If the mouse is on the top of the viewport within the activation distance.
                scrollY = -config.scrollDistance;
              }
              else if (lastMouseEvent.clientY > viewportHeight - config.activationDistance) {
                // If the mouse is on the bottom of the viewport within the activation distance.
                scrollY = config.scrollDistance;
              }
            }

            if (scrollX !== 0 || scrollY !== 0) {
              // Record the current scroll position.
              var currentScrollLeft = ($window.pageXOffset || $document[0].documentElement.scrollLeft);
              var currentScrollTop = ($window.pageYOffset || $document[0].documentElement.scrollTop);

              // Remove the transformation from the element, scroll the window by the scroll distance
              // record how far we scrolled, then reapply the element transformation.
              var elementTransform = element.css('transform');
              element.css('transform', 'initial');

              $window.scrollBy(scrollX, scrollY);

              var horizontalScrollAmount = ($window.pageXOffset || $document[0].documentElement.scrollLeft) - currentScrollLeft;
              var verticalScrollAmount = ($window.pageYOffset || $document[0].documentElement.scrollTop) - currentScrollTop;

              element.css('transform', elementTransform);

              lastMouseEvent.pageX += horizontalScrollAmount;
              lastMouseEvent.pageY += verticalScrollAmount;

              $rootScope.$emit('draggable:_triggerHandlerMove', lastMouseEvent);
            }

          });
        };

        var clearInterval = function() {
          animationIsOn = false;
        };

        scope.$on('draggable:start', function(event, obj) {
          // Ignore this event if it's not for this element.
          if (obj.element[0] !== element[0]) return;

          if (!animationIsOn) createInterval();
        });

        scope.$on('draggable:end', function(event, obj) {
          // Ignore this event if it's not for this element.
          if (obj.element[0] !== element[0]) return;

          if (animationIsOn) clearInterval();
        });

        scope.$on('draggable:move', function(event, obj) {
          // Ignore this event if it's not for this element.
          if (obj.element[0] !== element[0]) return;

          lastMouseEvent = obj.event;
        });
      }
    };
  }]);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-06-09

AngularJS中$apply方法和$watch方法用法总结

本文实例总结了AngularJS中$apply方法和$watch方法用法.分享给大家供大家参考,具体如下: 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些AngularJS中Scope 提供$apply 方法传播Model 的变化和$watch方法监听module变化. $apply使用情景 AngularJS 外部的控制器(DOM 事件.外部的回调函数如 jQue

说说AngularJS中的$parse和$eval的用法

AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval. 总的来说,$parse和$eval都是作用于AngularJS的表达式. 什么是表达式? AngularJS中的表达式就是一些类似于JavaScript代码的代码片段(但是它们和JavaScript代码有不尽相同).表达式通常被用来防止在绑定中,例如{{expression}}.下面是一个例子: 1 + 2 = {{ 1 + 2 }} 或者: My

深究AngularJS中$sce的使用

为什么要要$sce?因为AngularJS里好些地方,比如路径默认是个字符串,不会认为是路径,从而访问不到我们需要的东西,那么我们就可以通过$sce告诉angualrJS这个路径,这样是很安全滴.它有以下几种: $sce.trustAs(type,name); $sce.trustAsUrl(value); $sce.trustAsHtml(value); $sce.trustAsResourceUrl(value); $sce.trustAsJs(value); 1.trustAsResour

AngularJS中使用three.js的实例详解

AngularJS中使用three.js的实例详解 一.轨迹球的引入问题 一开始我是用下面的方式引如轨迹球,但是会报Trackballcontrols is undefined的错. import * as THREE from 'three'; import * as Trackballcontrols from 'three'; 但其实我是能够在node_module下的threejs的包中找到Trackballcontrols的文件的,我一开始以为是引用的路径没对然后修改路径到对应包下Tr

详解AngularJS中自定义过滤器

过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何

深入学习AngularJS中数据的双向绑定机制

Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好.双向数据绑定可能是AngularJS最酷最实用的特性,将MVC的原理展现地淋漓尽致. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入.AngularJS将会遍历DOM模

AngularJS中处理多个promise的方式

在使用AngularJS中处理promise的时候,有时会碰到需要处理多个promise的情况. 最简单的处理就是每个promise都then.如下: var app = angular.module("app",[]); app.controller("AppCtrl", function($q. $timeout){ var one = $q.defer(); var two = $q.defer(); var three = $q.defer(); $time

浅谈AngularJS中使用$resource(已更新)

这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了. REST是Representational State Transfer(表征状态转移)的缩写,是服务器用来智能化地提供数据服务的一种方式 1)我们首先需要引入ng-Resource  模块,在angular之后 <script src="js/vendor/angular.js"></script> &l

详解Angularjs中的依赖注入

一个对象通常有三种方式可以获得对其依赖的控制权: 在内部创建依赖: 通过全局变量进行引用: 在需要的地方通过参数进行传递 依赖注入是通过第三种方式实现的.比如: function SomeClass(greeter) { this.greeter = greeter; } SomeClass.prototype.greetName = function(name) { this.greeter.greet(name); }; SomeClass能够在运行时访问到内部的greeter,但它并不关心