小编Fid*_*l90的帖子

如何使用angularJS在多个项目之间共享代码

我想知道在多个angularJS项目之间共享公共库和自己的模块的最佳实践是什么.

我们假设我正在开展两个不同的项目.两者都依赖于angularJS,bootstrap等库.

我有一个如下文件结构:

  • 项目1
    • 的index.html
    • CSS
    • JS
      • 模块A.
      • 模块B.
    • LIB
      • 引导
  • 项目2
    • 的index.html
    • CSS
    • JS
      • 模块B.
      • 模块X.
    • LIB
      • 引导

所以我在考虑用所有共享组件创建另一个目录,这样我就可以了.喜欢:

  • 共享
    • 引导
    • 模块B.
  • 项目1
    • 的index.html
    • CSS
    • JS
      • 模块A.
  • 项目2
    • 的index.html
    • CSS
    • JS
      • 模块X.

我有模块B写成:

angular.module("moduleB", [])
    .service("SB", [function () {/*functionality here*/}]);
    .factory("FB", [function () {/*functionality here*/}]);
Run Code Online (Sandbox Code Playgroud)

然后将它包含在我的Project 1/2中作为依赖项,如:

angular.module("project1", ["moduleB"]);
Run Code Online (Sandbox Code Playgroud)

实现这种方法.

那会是最好的方式吗?什么可以替代?

javascript module shared-libraries angularjs

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

使用CSS3将固定元素定位在页面的右下角

我的页面最大宽度为1280像素.使用margin: 0 auto;Now我想在右下角放置一个元素,正文在大屏幕上居中.必须修复它,因为它应该滚动内容.在大于1280像素的屏幕上,元素应保留在居中主体的角落,而不是粘在窗口的右侧.

元素应该粘在那里,与当前视口宽度无关.

我已经通过使用媒体查询和CSS3-calc操作的组合解决了这个问题.对于这个简单的任务来说,这感觉有些过分,但我找不到比我更简单的解决方案.这是一些示例css(我已经将最大页面宽度更改为500px):

body {
    max-width: 500px;
    height: 1000px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid black;
}

div {
    position: fixed;
    right: 0;
    bottom: 0;
    height: 30px;
    width: 30px;
    margin: 0;
    padding: 0;
    background-color: red;
}

@media all and (min-width: 515px) /*max body width + (element width / 2)*/ {
    div {    
        margin-right: -webkit-calc((100% - 500px) / 2);
        margin-right: -moz-calc((100% - 500px) / 2);
        margin-right: calc((100% - 500px) / 2);
    }
}
Run Code Online (Sandbox Code Playgroud)

JSFiddle:https …

html css css-position css3

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

CSS flexbox在FireFox中包装内容(不是Chrome)

我有一个button由一个<i>和一个<span>元素(一个图标和一些文本)组成.现在两者都有不同的尺寸,所以我在我的按钮上应用了一个flexbox,它可以很好地集中我的物品.在Chrome中,一切都按预期工作,但在当前FF中使用页面会导致包含按钮的内部内容.图标通过:before伪元素显示.

的jsfiddle

谁在这里错了?是FF还是Chrome(和我).我应该怎样做才能在浏览器中获得相同的结果(文本前的图标,垂直中心,没有换行)?

css firefox google-chrome pseudo-element flexbox

6
推荐指数
1
解决办法
1286
查看次数

在 MS IE11 中启用全屏时无法滚动 &lt;body&gt;

我有一个使用 Bootstrap3 具有固定页眉和页脚的页面。下面的内容是可滚动的。用户可以通过 F11 或按钮(使用 FullScreen-API)启用全屏模式。这在 Chrome 和 FF 中工作正常,但在 IE11 中出现问题。F11 全屏效果总是很好。但是使用 javascript 切换全屏模式会导致我的页面在使用 IE11 时被放置在顶部底部,并且宽度和高度缩小。我的页眉和页脚保持不变。

<body>
    <header>Fixed</header>
    <main>Scrollable</main>
    <footer>Fixed</footer>
</body>
Run Code Online (Sandbox Code Playgroud)

我创建了一个小小提琴,可以显示我在做什么。不幸的是,全屏不会在 JSFiddle 中切换,因此最好将代码复制到其他地方: https: //jsfiddle.net/j122kdju/

这是该网站的两个屏幕截图。我给 html 设置了绿色背景色,以查看通过 JS API 启用全屏时发生的情况。第一张图显示了 IE11 中没有全屏的页面:

在此输入图像描述

第二个显示通过 IE11 中的 JS API 启用全屏:

在此输入图像描述

我可以通过将 css 中的 html 宽度设置为 100% 来解决这个问题。无论如何,溢出的页面就不能再滚动了。滚动条不可见。如前所述,这在其他浏览器中运行良好。

有没有可用的解决方法?我在这里错过了什么吗?谢谢

编辑:也许相关:IE 在全屏模式下无法滚动

html css internet-explorer fullscreen html5-fullscreen

5
推荐指数
1
解决办法
2232
查看次数

FabricJS - 自由绘图模式下的画布混合模式

使用无织物绘图模式时,我想在不透明度的画布上添加不同的线条。当这些线相互绘制时,它们的不透明度不应相加。因此,我将画布混合模式更改为xor. 无论如何,当相互画线时,不透明度仍然会增加。我在这里做错了什么?

var canvas = new fabric.Canvas("a", {
		isDrawingMode : true
});

document.getElementById("cbFreeDrawing").onchange = function () {
  canvas.isDrawingMode = this.checked;
};

canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));

canvas.freeDrawingBrush.width = 25;
canvas.freeDrawingBrush.color = "rgba(255,0,0,.5)";
//this seems not to work
canvas.getContext().globalCompositeOperation = 'xor';
Run Code Online (Sandbox Code Playgroud)
canvas {
  border: 1px solid;
}
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.min.js"></script>
Drawing Mode: <input id="cbFreeDrawing" type="checkbox" checked="true"/><br/>
<canvas id="a" width="400" height="300"></canvas>
Run Code Online (Sandbox Code Playgroud)

javascript blending canvas html5-canvas fabricjs

4
推荐指数
1
解决办法
2473
查看次数

如何在使用browserify时在AngularJS中包含jQuery?

我正在使用node,gulp和browserify来使我的JS文件正确顺序并管理模块.我将jQuery和AngularJS安装为节点模块,并在需要时需要它们.Angular默认使用jqLit​​e来处理DOM-Elements.

我知道当jQuery在AngularJS之前加载时,Angular将使用jQuery而不是jqLit​​e.

但是在使用browserify时如何让Angular使用jQuery呢?或者:怎么可能需要jQuery角度?

现在我正在做var $ = require("jquery");,并在需要时使用它.但是我希望有一个Angular,例如在做的时候会原生地给我jQuery方法:

app.directive("dir", function () {
    return {
        link : function ($scope, $elem) {
            var a = $elem.width();//jQuery methods currently not available here
        }
    };
});
Run Code Online (Sandbox Code Playgroud)

我真正需要做的是:

var jQuery = require("jquery");

app.directive("dir", function () {
    return {
        link : function ($scope, $elem) {
            var jqElement = jQuery($elem);
            var a = $jqElement.width();//jQuery methods are available here
        }
    };
});
Run Code Online (Sandbox Code Playgroud)

javascript jquery node.js angularjs browserify

3
推荐指数
1
解决办法
4101
查看次数

Number.EPSILON 的浏览器支持?

我想Number.EPSILON在我的应用程序中使用该值,并且想知道不同浏览器如何支持它。MDN 表示Firefox 和 Chrome 支持它,但 IE 和 Safari 不支持。

我自己在IE11和Edge的控制台测试过。Edge 给了我2.220446049250313e-16预期的结果,IE11 给了undefined. 我无法自己测试 Safari。

  1. 是否有支持表显示不同浏览器版本的支持?

  2. 我可以安全地var eps = Number.EPSILON || 2.220446049250313e-16;用作后备吗?

javascript cross-browser epsilon browser-support

3
推荐指数
1
解决办法
1484
查看次数

如何使用transformMatrix转换点在fabricJS中工作?

我正试图fabric.Circle在一个角上放置点(通过)fabric.Polygon.用户可以移动,缩放或旋转多边形.但是,在每次修改后,我想要使用多边形的新坐标来放置我的圆圈.

在深入研究这个主题的过程中,我发现了转换矩阵的这个很好的解释.我认为这是我想达到的目标的完美解决方案.但正如你在小提琴中看到的那样,我的观点总是远离我的多边形.

由于我对几何变换等不太坚定,我希望有人能找到我的错误并告诉我我错过了什么:)谢谢.

var canvas = new fabric.Canvas("c", {selection: false});

var polygon = new fabric.Polygon([
  new fabric.Point(200, 50),
  new fabric.Point(250, 150),
  new fabric.Point(150, 150)
]);

polygon.on("modified", function () {
  var matrix = this.calcTransformMatrix();
  var transformedPoints = this.get("points").map(function(p){
    return fabric.util.transformPoint(p, matrix);
  });
  var circles = transformedPoints.map(function(p){
    return new fabric.Circle({
      left: p.x,
      top: p.y,
      radius: 3,
      fill: "red",
      originX: "center",
      originY: "center",
      hasControls: false,
      hasBorders: false,
      selectable: false
    });
  });
  
  this.canvas.clear().add(this).add.apply(this.canvas, circles).setActiveObject(this).renderAll();
});

canvas.add(polygon).renderAll();
Run Code Online (Sandbox Code Playgroud)
canvas { …
Run Code Online (Sandbox Code Playgroud)

javascript transformation transform fabricjs

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

如何在fabricJS中通过鼠标选择覆盖的对象?

我正在尝试开发一种方法来选择在下面分层并且(完全)被其他对象覆盖的对象。一种想法是选择顶部对象,然后通过doubleclick层向下走。这是我目前得到的:

var canvas = new fabric.Canvas("c");

fabric.util.addListener(canvas.upperCanvasEl, "dblclick", function (e) {
  var _canvas = canvas;
  var _mouse = _canvas.getPointer(e);
  var _active = _canvas.getActiveObject();
    
  if (e.target) {
    var _targets = _canvas.getObjects().filter(function (_obj) {
      return _obj.containsPoint(_mouse);
    });
      
    //console.warn(_targets);
      
    for (var _i=0, _max=_targets.length; _i<_max; _i+=1) {
      //check if target is currently active
      if (_targets[_i] == _active) {
       	//then select the one on the layer below
       	_targets[_i-1] && _canvas.setActiveObject(_targets[_i-1]);
         break;
        }
      }
    }
});

canvas
  .add(new fabric.Rect({
    top: 25,
    left: 25,
    width: …
Run Code Online (Sandbox Code Playgroud)

javascript canvas selection html5-canvas fabricjs

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

从类似斑点的图像的(内部和外部)边缘创建路径

我正在寻找一种从二进制图像(只有黑色和白色像素)创建类似 svg 的路径的方法。图像本身将是一个形状不规则的斑点,其中可能有孔。

如果没有洞,我只需要一个边界路径来重新创建斑点的边界。当斑点中有洞时,我可以使用额外的路径(我猜,单独一条路径无法重新创建它)。最后我只需要知道哪条路径是外部路径,哪些是洞。

我已经找到了这些:

另外我需要检测漏洞。结果是多边形还是路径对我来说并不重要。我只需要精度足够高的点,使曲线保持弯曲:)

如果有人有一个想法甚至一些进一步的来源,那就太好了。

PS:如果这有什么区别的话,我正在使用canvas和javascript(fabricJS)。

javascript canvas image-processing edge-detection html5-canvas

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

为node.js中的所需模块创建回调

是否有可能在我自己创建的模块中创建某种回调?

我的问题是我为我的应用程序编写了一个模块.在这个模块中完成了一些任务,现在我的主应用程序应该获得模块完成任务的反馈.

以下描述了我想要但不会做的事情......

//module mymod.js
function start()
{
    var done = false;

    //do some tasks
    done = true;
}
exports.done = done;
Run Code Online (Sandbox Code Playgroud)

主要应用

var mymod = require("./mymod.js");

while(!mymod.done)
{
    //do some tasks
}
Run Code Online (Sandbox Code Playgroud)

如果有人可以帮助我,我会很高兴.

PS:我尝试了这种情况的子进程(fork),但因为它似乎复制整个过程我不能再访问打开的OpenCV视频捕获...... :(通过使用模块我不会遇到这个问题,但我得到这个一个为它^^

javascript ipc module child-process node.js

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

CSS伪类选择不起作用

我有以下HTML结构:

<ol>
    <li><a id="a" href="#">Not this</a></li>
    <li><a id="b" href="#">Not this</a></li>
    <li><a id="c" href="#">This one</a></li>
    <li class="active"><span>Not this</span></li>
</ol>
Run Code Online (Sandbox Code Playgroud)

我想通过CSS选择#c.我试过了:

ol > li:not(.active):last-child > a {
  border: 1px solid green;
}
Run Code Online (Sandbox Code Playgroud)

据我了解li:not(.active)选择所有li元素,但选择类.active.

在这个选择中,我使用:last-child来获取这些li元素中的最后一个.但这不会奏效.怎么了?我想要达到的目标是否可能?

非常感谢你 :)

PS:列表长度是动态的,元素没有任何可用于CSS选择的id(我只是在示例中使用了一些来澄清我想要选择哪个元素);)

html css css-selectors pseudo-class

1
推荐指数
1
解决办法
269
查看次数