小编swe*_*edo的帖子

app.controller与angular.js中的函数

我正在学习angular.js,并想知道什么时候app.controller("MyCtrl",...)应该使用以及什么时候function MyCtrl($scope){...}应该使用.

我看到这个例子中两种方法之间没有太大的区别(链接到一个plunker):

index.html:

<body ng-app="myApp">

    <div ng-controller="FirstCtrl as app1">
        <button class="btn" ng-model="app1.count"
                            ng-click="app1.increment()">
        Click to increment</button>
        {{ app1.count }}
    </div>

    <div ng-controller="SecondCtrl">
        <button class="btn" ng-model="count"
                            ng-click="increment()">
        Click to increment</button>
        {{ count }}
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
    <script type="text/javascript" src="example.js"></script>
</body>
Run Code Online (Sandbox Code Playgroud)

example.js:

var app = angular.module("myApp", []);

app.controller("FirstCtrl",function () {
    this.count = 0;
    this.increment = function (){
        this.count = this.count + 1;
    }
});

function SecondCtrl($scope){
    $scope.count = 0;
    $scope.increment = function …
Run Code Online (Sandbox Code Playgroud)

angularjs

27
推荐指数
3
解决办法
3万
查看次数

backbone remove view删除el

我正在创建一个单页面应用程序,我对骨干很新.我在创建使用相同wrapper-div的多个视图时遇到问题.

我的设置:

我为所有视图添加了一个close函数:

Backbone.View.prototype.close = function(){
    this.remove();
    this.off();
    if (this.onClose){
        this.onClose();
    } 
}
Run Code Online (Sandbox Code Playgroud)

我有一个wrapper-div,我想渲染视图,删除它们并渲染新的视图.所以我的SetupView看起来像这样:

app.SetupView = Backbone.View.extend({
    el: '#my_view_wrapper',
    ...
});
Run Code Online (Sandbox Code Playgroud)

从我交换视图的函数我关闭当前(打开)视图,如下所示:

var v = this.model.get('view');
v.close();
Run Code Online (Sandbox Code Playgroud)

我的问题是我有多个视图使用相同的wrapper-div.但是当我关闭一个视图时,这个wrapper-div似乎被删除了,我尝试创建的下一个视图找不到这个div.

我想有一个简单的解决方案?我想重用相同的包装器,只删除其中的视图,而不是包装器本身.

javascript jquery backbone.js backbone-views

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

angular-translate - determinePreferredLanguage()的后备语言

我在我的应用程序中使用angular-translate.如果determinePreferredLanguage()返回我的代码不知道的语言密钥,如何注册后备语言?

如果瑞典的某个人访问我的网站(语言密钥:sv),我想回到英语.但由于我没有在我的函数中列出svregisterAvailableLanguageKeys,它失败了,语言键显示给用户而不是翻译.

$translateProvider
    .registerAvailableLanguageKeys(['da-dk','en-us'], {
        'en_US': 'en-us',
        'en_UK': 'en-us',
        'da': 'da-dk',
    })
    .determinePreferredLanguage();
Run Code Online (Sandbox Code Playgroud)

angularjs angular-translate

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

相交的svg封闭路径

测试svg绘制的两个形状path是否相交,有什么好方法(代码方面和性能方面)?我在d3中这样做,并使用"基数闭合" 线插值

更具体地说,我正在创建凸包(比图像中更复杂),如果它们重叠,我想合并外壳.如果我使用"线性闭合"插值很容易,因为那时我可以使用顶点来计算交点,但"基数闭合"插值在我使用它的地方看起来更好.

var v1 = [[100,100],[200,100],[200,200],[100,200]],
v2 = [[210,100],[310,100],[310,200],[210,200]];

var hull1 = d3.geom.hull(v1),
    hull2 = d3.geom.hull(v2);

var svg = d3.select("#foo")
    .append("svg");

var line = d3.svg.line()
    .interpolate("cardinal-closed")
    .x(function(d) {return d[0];})
    .y(function(d) {return d[1];});

svg.append("path")
    .attr("d", line(hull1));
svg.append("path")
    .attr("d", line(hull2));
Run Code Online (Sandbox Code Playgroud)

输出代码

这是一个jsfiddle.如何测试这些形状是否相交/重叠?

javascript svg convex-hull d3.js

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

带有HTML基本元素的AngularJS应用程序中的Svg clipPath

clipPath在AngularJS项目中使用了svg .我在为clipPath指定相对url时遇到问题,因为我需要<base>在项目中使用该元素.

例如,此代码可以在项目中使用base,但不能在项目中使用<base href="/">

<svg width="120" height="120"
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <defs>
        <clipPath id="myClip">
            <rect x="10" y="10" width="60" height="60"></rect>
        </clipPath>
    </defs>

    <g clip-path="url(#myClip)">
        <circle cx="30" cy="30" r="20"/>
        <circle cx="70" cy="70" r="20"/>
    </g>

</svg>
Run Code Online (Sandbox Code Playgroud)

怎么解决这个问题?我使用ui-router,如果这与问题有关...

这个问题大致相同,但OP找到的"解决方案"是删除基础,这在我的情况下不是解决方案.

svg angularjs

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

轴上的自定义刻度尺寸(d3js)

我在d3.js中创建了一个svg xy-chart.是否可以根据tickValue创建不同长度的刻度?

我已经制作了自己的tickFormat函数myTickFormat并使用它.tickFormat([format])并且工作正常,因为[format]应该是一个函数.但这是不可能做同样的.innerTickSize([size]),期望一个数字.

例如,如果我希望值70的刻度更长,我想做这样的事情:

var myTickSize = function(d) {
    if (d === 70) { return 20;}
    return 6;
};
Run Code Online (Sandbox Code Playgroud)

但当我myTickSize用作参数时.innerTickSize():

var yScale = d3.scale.linear();
var yAxis = d3.svg.axis()
               .scale(yScale).orient("left")
               .innerTickSize(myTickSize);
Run Code Online (Sandbox Code Playgroud)

我收到错误:每个tick的属性x2 ="NaN"错误的值无效.

javascript svg d3.js

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

SVG中的HTML元素未显示

我和foreignObjectSVG 一起讨厌.我想在一个内部添加文本rect,并获得自动文本换行我选择使用HTML.foreignObject可以在这里找到描述.

我正在使用D3,这是我的数据:

var cds = [
{"uid":"U12","sid":"16","statement":"Movies","x":10,"y":10},
{"uid":"U20","sid":"17","statement":"Food","x":10,"y":170},
{"uid":"U22","sid":"15","statement":"Sport","x":10,"y":330}
];
Run Code Online (Sandbox Code Playgroud)

我为每个数据添加一张卡片,并希望显示数据中的"语句".

var cardsize = { width : 150, height : 150 };

var svg = d3.select("body").append("svg:svg")
    .attr("width", 170)
    .attr("height", 490);

var card =  svg.selectAll("rect")
    .data(cds)
    .enter().append("svg:g")
    .attr("class", "card")
    .attr("transform", function(d,i) { 
        d.x = 10;
        d.y = 10+i*(10+cardsize.height);
        return "translate(" + d.x + "," + d.y + ")";
    });

card.append("svg:rect")
    .attr('width', cardsize.width)
    .attr('height', cardsize.height)

card.append("svg:foreignObject")
    .attr('width', cardsize.width)
    .attr('height', cardsize.height)
    .append('p')
    .attr("class","statement")
    .text(function(d) …
Run Code Online (Sandbox Code Playgroud)

javascript svg d3.js

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

AngularJS css动画+完成回调

我正在使用AngularJS,并希望在动画完成时收到通知.我知道这可以通过像这样的javascript定义的动画来完成myApp.animation(...),但我很好奇我是否可以在没有javascript的情况下执行此操作.

问题:是否可以使用角度ng-enterng-leave css-transitions,并指定完成回调?我猜这个animationend事件被解雇了,所以应该有办法做到这一点.

我有这个:

HTML:

<div ng-if="item" class="myDiv"> {{ item.name }} </div>
Run Code Online (Sandbox Code Playgroud)

CSS:

.myDiv.ng-enter {...}
.myDiv.ng-enter.ng-enter-active {...}
.myDiv.ng-leave {...}
.myDiv.ng-leave.ng-leave-active {...}
Run Code Online (Sandbox Code Playgroud)

我想myDone()在动画结束时调用(即ng-enter-active删除类后).

javascript css animation angularjs

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

通过在它们周围进行自由绘图来选择SVG元素

我正在开发一个项目,我想围绕一些SVG元素绘制一条线,以便选择区域内的对象.

这是我现在所拥有的截图.我已经使用Paint来添加线条,以便清楚地表明我想要实现的目标.我想rect在绘制的圆圈内选择两个.

截图http://s23.postimage.org/y6t5t9be3/Screen_Shot_2013_02_26_at_15_31_26.png

我看到了许多必须解决的步骤:

  1. path在at处创建一个元素mousedown并记录鼠标移动直到mouseup
  2. path如果用户没有画圆圈,请关闭
  3. 找到完全或部分在圆圈内的svg元素

你看到哪种方法,你对如何去做有什么建议吗?

我使用D3.js.这张幻灯片(作者D3的创建者Mike Bostock)可能会很有趣.

html javascript svg d3.js

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

React useReducer 调度顺序

我正在使用useReducer,并且想要dispatch2 次。是否保证第二次输入到减速器的状态是第一次更新的输出?

如果我这样做

dispatch({ type:"RESET" }); // set state to default state
dispatch({ type:"LOAD", id: "abc" }); // set id
Run Code Online (Sandbox Code Playgroud)

我能确定那个状态会是吗{ ...defaultState, id: "abc" }

reactjs react-redux react-hooks

5
推荐指数
0
解决办法
1017
查看次数