小编joy*_*joy的帖子

Angular js双向数据绑定问题,以管理"文本框"到"标签"的变化

我正在使用具有"编辑"字段的数据模型.并基于"编辑"值我使用文本框或标签.我希望一旦用户在编辑后点击"确定"然后文本框应该更改为标签.但不知怎的,它不起作用.以下是jsfiddle示例.请帮忙.

http://jsfiddle.net/dilipkumar2k6/zEdY8/2/`">JSFiddleLink

angularjs angularjs-scope

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

Angularjs正在将URL更改回原始导致问题

我的应用程序基于单页模型.我正在使用JQuery History对象来更改URL,以便在用户刷新应用程序时,我可以在用户刷新浏览器时保留应用程序的位置.它工作得很好但不知怎的它停止了工作.经过分析,我发现Angular.js正在将修改后的URL(由Jquery History API修改)更改为原始URL(用于启动Application的URL).我很惊讶和困惑为什么突然Angular JS开始重置URL.我尝试了很多,但没有找到任何根本原因.请帮助,也请建议其他可能的方法,以保留浏览器刷新(或后退按钮)上的用户位置.以下是更多细节.

//Change the browser state to support History to launch file. It will remove projectid from URL and will add fileid
function updateBrowserStateOnFileLaunch(fileId, pageTitle, stateCounter)
{
    //Get current URL
    var finalURL = getNormalizedHashedURL("");
        //Remove projectid query string from paramter if it has and update/add fileid
        finalURL = updateQueryStringParameters(finalURL, [{key:"projectid", value:undefined}, {key:"fileid", value:fileId}]);   
    //Change history
    History.pushState({state:stateCounter,rand:getTimestampId()}, pageTitle, finalURL); 
}
Run Code Online (Sandbox Code Playgroud)

注意:不添加"getNormalizedHashedURL"和"updateQueryStringParameters"方法的详细信息以保持较小的帖子.

我正在使用ng-if根据状态更改视图.

<!-- File editor view -->
        <div data-ng-if="currentView === 3">    
<!-- Project File view-->
</div>
Run Code Online (Sandbox Code Playgroud)

在调试期间,我看到angular.js在执行以下行后重置URL. …

jquery angularjs angular-resource

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

angular.element($ window).scrollTop()使用webpack抛出"不是函数"

我正在使用Angularjs进行前端开发.最近我开始实现Webpack然后我意识到angular.element($ window).scrollTop()停止工作并开始抛出错误,因为"windowElement.width不是函数".以下是旧代码和webpack的新代码.

旧工作代码:

app.directive("ajnav", ['$window', '$location', function ($window, $location) {
        return {
            restrict: "E",
            templateUrl: "/templates/common/AJNav.html",
            replace: true,
            scope: {
                seo: '=',
                conf: '='
            },
            link: function (scope, element, attrs) {
                //Bind event change the postion of AJ Nav on scroll
                var windowElement = angular.element($window);
                var onScrollHandler = function () {                    
                    //Get current height of iNav.
                    var iNavHeight = $("#iNavNGI_Header").height();
                    if (windowElement.scrollTop() > iNavHeight) {
                        $(element).addClass('navbar-fixed-top');
                        $(element).removeClass('aj-nav-container-absolute');
                    }
                    else {
                        $(element).removeClass('navbar-fixed-top');
                        $(element).addClass('aj-nav-container-absolute');
                    }
                };
                //Bind event handler on scroll
                windowElement.on('scroll', …
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-directive webpack

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

gulp.spritesmith在生成的css文件中压缩"icon-"前缀

我正在使用gulp.spritesmith来自动化精灵图像和css生成.一切都很好,除了生成的css是haivng"icon-"前缀.我不想添加此前缀,因为我有现有的HTML标记,我不想更改标记.以下是我的gulp任务.

'use strict';
var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');


gulp.task('sprite', function () {    

    var spriteData =
            gulp.src('./sprite/*.*') // source path of the sprite images
            .pipe(spritesmith({
                imgName: 'sprite.png',
                cssName: 'sprite.css'
            }));

    spriteData.img.pipe(gulp.dest("./css")); // output path for the sprite
    spriteData.css.pipe(gulp.dest("./css")); // output path for the CSS
});
Run Code Online (Sandbox Code Playgroud)

以下是我生成的CSS.

.icon-icon1 {
  background-image: url(sprite.png);
  background-position: 0px 0px;
  width: 120px;
  height: 120px;
}
.icon-icon2 {
  background-image: url(sprite.png);
  background-position: -120px 0px;
  width: 120px;
  height: 120px;
}
Run Code Online (Sandbox Code Playgroud)

请帮助压制"icon-".

gulp grunt-spritesmith

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

即使我的client.js没有使用它,为什么必须导入"反应"

当我没有在我的client.js中导入"React"时,我正在学习React并且在我的代码不起作用时感到困惑.理想情况下,当我在代码中不使用"React"时,我不应该强制导入"react"模块.以下是代码段.

Layout.js:

import React from "react";

export  default class Layout extends React.Component {
  constructor () {
    super();
    this.name = "Dilip";
  }
  render () {
    return (
      <h1>Welcome {this.name} in React world !!</h1>
    )
  }
}
Run Code Online (Sandbox Code Playgroud)

工作代码:

import React from "react";
import ReactDOM from "react-dom";

import  Layout from "./components/Layout"

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);
Run Code Online (Sandbox Code Playgroud)

不工作代码:

import ReactDOM from "react-dom";

import  Layout from "./components/Layout"

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);
Run Code Online (Sandbox Code Playgroud)

当我删除导入"React"的代码时,为什么它不起作用?我没有在任何地方使用"React"因此它应该工作.它在控制台中抛出以下错误.

Uncaught ReferenceError: React is not defined
Run Code Online (Sandbox Code Playgroud)

注意:我正在关注视频

reactjs

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

mongo更新查询忽略更新操作中的几个字段

我正在使用基于 Nodejs 的 mongoskin 驱动程序进行 mongo 数据库操作。我想更新我的文档,但不想更新一些字段。以下是更多详细信息。

请求添加:

{
  "name": "Theme Name",   
  "description": "Theme Description",
  "createdByUserId": "53651221b25521601a5c9530",    
} 
Run Code Online (Sandbox Code Playgroud)

请求更新:

{
  "_id":"53555ef203dabf282b750a81"
  "name": "Theme Name",
  "categoryId": "53555ef203dabf282b750a81",
  "description": "Theme Description",  
  "createdByUserId": "53651221b25521601a5c9530",
  "updatedByUserId": "5675561b25521601a5c9530",
  "dateCreated": ISODate("2014-05-19T19:47:26.603Z"),
  "dateUpdated": ISODate("2014-05-19T19:49:28.203Z"),
}
Run Code Online (Sandbox Code Playgroud)

我想忽略客户端发送的以下字段。1.按用户 ID 创建 2.创建日期

目前我在更新操作中采用以下方法: 1. 读取给定_id的集合 2. 从数据库中读取上述两个字段并更新请求,然后执行数据库更新操作

寻求清洁方法的帮助。

mongodb node.js mongodb-query mongoskin

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

如何使用UI-Router定义可选参数而不使用尾部斜杠?

我正在努力将我的Angularjs代码从ng-router迁移到UI-Router.在我的ng-router中我有可选参数但是我意识到在ui-router中不支持同样简单的方法来支持可选参数.以下是我现有的ng-router模块的路由.

//Define routes for view  using ng-router
$routeProvider.
        when('/my-app/home/:userid?', {
            templateUrl: '/templates/partials/home/HomeView.html',
            controller: 'HomeViewController'
        })                   
        .when('/my-app/:productKey/:userid?', {
            templateUrl: '/templates/partials/productpage/ProductPageView.html',
            controller: 'ProductViewController'
        })
        .otherwise({redirectTo: '/my-app/home'});
Run Code Online (Sandbox Code Playgroud)

注意:如果您看到":userid"参数在这里非常顺利地实现为可选.

我尝试在ui-router中跟随但是同样不起作用.我经历了很多帖子,建议复制路线.我真的不想复制,因为它会使代码变脏.

//Set the default route

$urlRouterProvider.otherwise('/my-app/home');
//Define routes for view   (Please make sure the most matched pattern is define at top)
$stateProvider
        .state('viewallcards', {
            url: '/my-app/home/:userid',
            templateUrl: '/templates/partials/home/HomeView.html',
            controller: 'HomeViewController'
        })
        .state('productpage', {
            url: '/my-app/:productKey/:userid',
            templateUrl: '/templates/partials/productpage/ProductPageView.html',
            controller: 'ProductViewController'
        });
Run Code Online (Sandbox Code Playgroud)

这里/ my-app/home /但是/ my-app/home不起作用.怎么做也没有尾随斜线?

在同一个问题上关注帖子也让我感到惊讶,知道ui-router不支持这个.它仍然有效吗?请帮忙.

javascript angularjs angular-routing angular-ui-router

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

使用crypto模块将Java编写的DESede/ECB/NoPadding算法转换为Nodejs

我正在将代码从 java 迁移到 Nodejs。我有一个要求使用“DESede/ECB/NoPadding”算法用私钥加密文本。目前代码是用 Java 编写的,现在我需要迁移到 Nodejs。由于加密密钥已发送到其他应用程序,因此我无法在此处更改算法或密钥。以下是java中使用的方法

1. Stored the private key in hex string. I.e. 48 chars hex string as below which is equivalent to 24 bytes reuquired for 3des
73AD9CEC99816AA6A4D82FB273AD9CEC99816AA6A4D82FB2
2. Following is code written in java 
https://github.com/dilipkumar2k6/3des/blob/master/TripleDes.java
import java.security.GeneralSecurityException;

import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;


public class TripleDes {
    // Crypto library related keys
    private static final String ALGO_NAME = "DESede/ECB/NoPadding";
    private static final int PADDING_BLOCK = 8;

    // Test Data
    private static final String PLAIN_TEXT = "Hello World"; …
Run Code Online (Sandbox Code Playgroud)

des node.js cryptojs

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

使用CSS的阴影效果

我需要实现阴影效果,如下面附加的模型.我已经强调了我需要实现为红色框的阴影效果.我被告知使用精灵图像来实现我不喜欢的阴影效果.我可以使用CSS3阴影效果来实现吗?

在此输入图像描述

请指教

css css3

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

Zoom CSS 属性不适用于 Mac safari 浏览器

我使用 gulp.spritesmith 生成精灵图像和 css。我的视网膜图像需要缩放 0.5 倍才能正确显示。它在除 Mac Safari 之外的所有浏览器和设备上都能完美运行。当图标类是锚标记的子级时,它在 Mac safari 上不起作用。以下是代码详细信息。

http://plnkr.co/edit/WNSLrTeZCVQSk1Ex2mTj?p=preview

后续工作

<div>
      <span class="rating-50"></span>
</div>
Run Code Online (Sandbox Code Playgroud)

关注无效

<a href="#">
      <span class="rating-50"></span>
</a>
Run Code Online (Sandbox Code Playgroud)

以下是进行图标缩放的类详细信息。

.rating-50{
zoom:.5;
-moz-transform:scale(.5);
-moz-transform-origin:0 0;
}
Run Code Online (Sandbox Code Playgroud)

我做了一些研究,发现 -webkit-transform:scale(.5); 在 Mac Safari 上可以工作,但是由于我的代码已经具有 Zoom:.5,因此图像会缩小两次。请检查正在运行的 pluker 并帮助找出根本原因并提出一些解决方案。

css safari macos

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

并行完成20个REST API调用,并在所有请求完成后组合数据并使用angularjs在屏幕上显示

我正在开发一个页面,它使用Angularjs和nodejs显示20个产品详细信息的列表.我有REST API来分别获取每个产品的数据.这是我在启动其他页面时使用的相同服务,其中显示了该产品的详细信息.

我正在寻找解决方案,以便在angularjs客户端代码中,我可以对REST API进行20次点击并组合数据,然后使用angularjs指令在我的页面中显示20个产品的列表.

一旦客户端获取所有数据然后将其组合然后在UI中显示,我如何并行地进行20个REST API调用以获取数据.

目前我正在逐个拨打电话并合并数据.以下是我正在使用的代码段.我不喜欢这种方法,因为它看起来根本不是最优的.

ApplicationLoaderService.initializePageCache($scope, 'product_1', 'myPage', function (response) {
    updateCache('product_1', 'myPage', response);
    ApplicationLoaderService.initializePageCache($scope, 'product_2', 'myPage', function (response) {
        updateCache('product_2', 'myPage', response);
        ApplicationLoaderService.initializePageCache($scope, 'product_3', 'myPage', function (response) {
            updateCache('product_3', 'myPage', response);
            ApplicationLoaderService.initializePageCache($scope, 'product_4', 'myPage', function (response) {
                updateCache('product_4', 'myPage', response);
                ApplicationLoaderService.initializePageCache($scope, 'product_5', 'myPage', function (response) {
                    updateCache('product_5', 'myPage', response);
                    ApplicationLoaderService.initializePageCache($scope, 'product_6', 'myPage', function (response) {
                        updateCache('product_6', 'myPage', response);
                        ApplicationLoaderService.initializePageCache($scope, 'product_7', 'myPage', function (response) {
                            updateCache('product_7', 'myPage', response);
                            ApplicationLoaderService.initializePageCache($scope, 'product_8', 'myPage', function (response) {
                                updateCache('product_8', 'myPage', response);
                                ApplicationLoaderService.initializePageCache($scope, …
Run Code Online (Sandbox Code Playgroud)

jquery angularjs angularjs-resource

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