小编Ant*_*din的帖子

角度Ui-router链接应用程序但在同一个域中

我正试图在我的角应用程序中使用ui-router.

我的基本网址是"/ segments",我使用基本标记来定义它.

<base href="/segments" />
Run Code Online (Sandbox Code Playgroud)

这是我的路由配置:

var base = "/segments"

$stateProvider
  .state('list', {
    url: base,
    controller: 'FilterLestCtrl',
    templateUrl: '/segments/partial?partial=list'
  })

  .state('new', {
    url: base + '/new',
    data: {
      mode: 'new'
    },
    controller: 'SegmentFormCtrl',
    templateUrl: '/segments/partial?partial=edit'
  })

  .state('edit', {
    url: base + '/:id/edit',
    data: {
      mode: 'edit'
    },
    controller: 'SegmentFormCtrl',
    templateUrl: '/segments/partial?partial=edit'
  });

$locationProvider.html5Mode(true).hashPrefix('!');
Run Code Online (Sandbox Code Playgroud)

当我点击链接标签时,我无法从我的应用程序退出到我网站上的其他资源,即我点击标记

<a class="" href="/widgets">Widgets</a>
Run Code Online (Sandbox Code Playgroud)

然后网址改变,什么也没发生.

问题:如何使用ui-router处理现场其他页面的外部链接?

javascript angularjs angular-ui-router

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

URL上的Angular UI-Router打开模态窗口更改

我在我的项目中使用angular-ui-router和angular-bootstrap.

我想实现以下用例:

当用户单击"编辑"按钮时,UI-Router更改URL并打开模式窗口.当我通过点击浏览器的后退按钮返回时,模态窗口正在关闭.

如果用户在打开模态窗口时重新加载页面,则应用程序应在主ui-view容器中呈现模态窗口内容.

您可以在此公司上看到此用例:http://canopy.co/(尝试单击项目并重新加载页面)

问题:如何实现上述行为?

这是我的jsFiddle http://jsfiddle.net/sloot/ceWqw/3/

var app = angular.module('myApp', ['ui.router', 'ui.bootstrap'])
.config(function ($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('app', {
      url: '/',
      controller: 'AppCtrl',
      templateUrl: '/views/app.html'
    })
    .state('item', {
      url: '/profile',
      controller: 'ItemCtrl',
      templateUrl: '/views/item.html'
    });
})
.controller('AppCtrl', function($scope, $modal, $state){
  $scope.open = function(){

    // open modal whithout changing url
    $modal.open({
      templateUrl: '/views/item.html'
    });

    // I need to open popup via $state.go or something like this
  };
})
.controller('ItemCtrl', function(){});
Run Code Online (Sandbox Code Playgroud)

javascript angularjs bootstrap-modal angular-ui-router

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

如何垂直制作D3 Streamgraph

我是D3的新手,所以我的问题可能很简单,但对我来说这是一个大问题。

题:

如何垂直制作Streamgraph?我的JSFiddle

我有这个:

在此处输入图片说明

我应该有这个:

在此处输入图片说明

小提琴在这里

JS

var dataMetric = [
    {
        "id": 1,
        "title": "Little Inc",
        "metrics": {
            "offers": 665,
            "shares": 20,
            "landings": 1124,
            "leads": 1102,
            "purchases": 88,
            "friends": 74
        }
    },
    {
        "id": 2,
        "title": "Marvin LLC",
        "metrics": {
            "offers": 20,
            "shares": 2,
            "landings": 20,
            "leads": 25,
            "purchases": 28,
            "friends": 18
        }
    },
    {
        "id": 3,
        "title": "Hodkiewicz, Jacobson and O'Conner",
        "metrics": {
            "offers": 834,
            "shares": 8,
            "landings": 759,
            "leads": 683,
            "purchases": 41,
            "friends": 35
        }
    }, …
Run Code Online (Sandbox Code Playgroud)

javascript d3.js stream-graph

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

Grunt connect-modrewrite不起作用

我使用generator-angular来创建我的项目.

我使用HTML5历史记录.($ locationProvider.html5Mode(真).hashPrefix() '!';)

对于url重写,我使用connect-modrewrite

我做了所有喜欢在教程中描述.

这是我的GruntFile.js

// Generated on 2013-12-13 using generator-angular 0.6.0
'use strict';

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
var modRewrite = require('connect-modrewrite');

module.exports = function (grunt) {

  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

  // proxy for …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs gruntjs

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

在NodeJS中执行webpack编译的bundle

我想为我的ReactJS应用程序实现服务器端呈现.我用react-router.我routes.js作为webpack入口点并使用output.libraryTarget = "commonjs2"选项进行编译.然后我需要NodeJS脚本中的编译结果来进行渲染.但我有错误.Webpack将模块包装在以下代码中:

/* 277 */
/***/ function(module, exports, __webpack_require__) {

    /* WEBPACK VAR INJECTION */(function(Buffer, global) {
    if (global.foo) {
        /* ... */
    }
    /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(277).Buffer, (function() { return this; }())))

 /***/ }
Run Code Online (Sandbox Code Playgroud)

当NodeJS尝试执行(function() { return this; }())其返回时undefined.在浏览器中它将返回window.为什么webpack使用这样的包装代码?如何使这个代码在NodeJS中工作?

我使用node-clone作为外部lib.它不使用任何其他库作为依赖.但是它的bundle中的webpack使缓冲区成为这个lib的依赖项.在buffer代码中,我遇到了错误Cannot read property 'TYPED_ARRAY_SUPPORT' of undefined.它发生是因为在nodeJS (function() { return this; }())返回undefined.

node.js reactjs webpack server-side-rendering

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

Html5画布任意形状

我正在尝试开发可以在画布中渲染图像和文本的程序.我试图在画布上处理点击图像,但它适用于可直接图像.

我的问题:您是否知道处理解决方案或框架在画布上点击图像的可见部分(不是透明部分)?

如果有人熟悉它,我正在寻找ActionScript hitTestObject函数的javascript实现.

这是一个简单的算法与可直接命中文本:http://jsfiddle.net/V92Gn/298/

var hitted = e.clientX >= position.x && 
    e.clientX <= position.x + logoImg.width && 
    e.clientY >= position.y && 
    e.clientY <= position.y + logoImg.height;
Run Code Online (Sandbox Code Playgroud)

javascript canvas hittest

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