小编Cup*_*Joe的帖子

AngularJs - 在指令控制器中使用自定义过滤器

场景
我有一组用户包含有关它们的信息,我ng-repeat结合自定义指令生成HTML用户卡,保持每张卡的范围相对于单个用户,在用户模型中有一个我需要的值在模板编译之前使用自定义过滤器进行过滤,因为如果我在模板内部进行过滤,则过滤所需的时间会使工具提示在值准备好之前不显示,看起来好像有些东西不起作用.

我的代码到目前为止

// userCard directive
angular.module('userCard', []).directive('UserCard', function() {
  return {
    restrict: 'EA',
    templateUrl: 'userCard.tpl.html',
    scope: {
        user: '='
    },
    controller: ['$scope', 'fromNowFilter', function($scope, fromNowFilter) {

        angular.forEach($scope.user.reminders, function(reminder) {
            reminder.last_sent = reminder.last_sent === null ? 'No reminder has been sent!' : fromNowFilter(reminder.last_sent);
        });
    }],
    link: function(scope, element) {
        // Add the base class to the user card element
        element.addClass('user-card');
    }
  };
});


// fromNow custom filter
angular.module('userCard').filter('fromNow', function() {
  return function(date) {
    return moment(date).fromNow();
  };
});


// …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angularjs-filter

7
推荐指数
1
解决办法
2万
查看次数

加载后Jcrop压缩图像,应用错误的宽度

我正在使用Jcrop来编辑用户上传的图像,当用户决定编辑他们的图像时,会进行AJAX调用以获取用户的原始图像,我的代码如下:

var jcrop_api;

$('.edit_image').on('click', function(e)
{
  var url = $(this).attr('data-url');

  e.preventDefault();

  $.ajax({
    url: url,
    type: 'GET',
    cache: false,
    beforeSend: function()
    {
      // Remove old box in case user uploaded new image bring the latest one
      $('#edit_box').remove();
    },
    success: function(result)
    { 
      if (result.error)
      {
        alert(result.error);
      }
      else
      {

        $('.edit_image_box').html(result);
        $('#edit_box').modal({ show: true});

        $('#original_img').load( function()
        {
          $(this).Jcrop({
            aspectRatio: 1,
            onSelect: updateCoords,
            boxWidth: 700,
            boxHeight: 700
          }, function()
          {
            jcrop_api = this;
          });
        });
      }
    }
  })
});

function updateCoords(c)
{
  $('#x').val(c.x);
  $('#y').val(c.y); …
Run Code Online (Sandbox Code Playgroud)

ajax jquery image crop jcrop

6
推荐指数
2
解决办法
2845
查看次数

标签 统计

ajax ×1

angularjs ×1

angularjs-filter ×1

crop ×1

image ×1

javascript ×1

jcrop ×1

jquery ×1