小编Oam*_*Psy的帖子

我有一个简单的Angular http.get:

app.factory('countriesService', function($http) {
return {
    getCountryData: function(done) {
        $http.get('/resources/json/countries.json')
        .success(function(data) { done(data);})
        .error(function(error) {
            alert('An error occured');
        });
    }
}
});

示例.JSON:

{
"NoCities": 66,
"Balance": 2103,
"Population":  63705000,
"CityInfo": [
    {
        "CityName": "London",
        "CityPopulation": "7825200",
        "Facts": {
            "SubFact1": "xzy",
            "SubFact2": "xzy",
            "SubFact3": "xzy",
            "SubFact4": "xzy",
            "SubFact5": "xzy"
        },
    },
    {
        "CityName": "Manchester",
        "CityPopulation": "2584241",
        "Facts": {
            "SubFact1": "abc",
            "SubFact2": "abc",
            "SubFact3": "abc",
            "SubFact4": "abc"
        },
    }

],
"SubmitInfo": null,
"FormAction": null,
"FormController": null,
}

我注意到当我的页面执行.length时,有时可能需要一段时间来加载数据,例如:

<div>
    <a>Countries</a> …

我一直在遵循一些有关如何创建对话框的指南：

http://blog.teamtreehouse.com/a-preview-of-the-new-dialog-element

由于某种原因，我的 CSS 没有渲染背景颜色。

这是我的小提琴：http://jsfiddle.net/oampz/8kRc3/

HTML：

<dialog class="modal">This is the dialog!</dialog>

CSS：

.modal {
    /* arbitrary styling */
    background-color: white;
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    height:200px;
    width:300px;
    /* change position to fixed if you want to prevent the dialog from scrolling away, and center it */
    position:fixed;
    top:50%;
    left:50%;
    margin-left: -150px;
    margin-top:-100px;
}
.modal::backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

任何帮助表示赞赏

我有一个相当简单的 CSS 问题。我有一个输入文本字段，在页面加载时，我希望它的宽度为 150 像素。

但是，当用户输入一些文本时，如果文本宽度大于 150 像素，则宽度应自动调整。

这是一个plunker：

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

HTML：

<input class="input-class" type="text" placeholder="Placeholder">

CSS：

.input-class-2 {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: -moz-use-text-color -moz-use-text-color #ef8e80;
  border-image: none;
  border-style: none none dashed;
  border-width: 0 0 1px;
  color: #ef8e80;
  cursor: pointer;
  font-family: Gotham-Book;
  font-size: 18px;
  min-width: 150px;
}

我认为 min-width 会这样做。

我正在尝试使用 AngularJS重新创建这个小提琴：http : //jsfiddle.net/mariusc23/s6mLJ/31/。

实际上，当用户向下滚动页面时，header消失了。如果，在任何时候，用户向上滚动，甚至 1/2 像素......header下拉。

我创建了一个 plunker：http ://plnkr.co/edit/DBiY57kKUWiISVDJiDU4?p=preview似乎应用了hide-header该类，但是，我似乎无法出现在 scrollUp 上。

指示：

app.directive("myDirective", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {

            var lastScrollTop = 0;
            var delta = 50;
            var windowInnerHeight = $window.innerHeight;
            var windowHeight = $window.height;

            var st = this.pageYOffset;

            // Make sure they scroll more than delta
            if(Math.abs(lastScrollTop - st) <= delta)
                return;

            // If they scrolled down and are past the navbar, add class …

我能够成功执行Promise.all,并且优雅地处理解析和拒绝.但是,有些承诺会在几毫秒内完成,有些可能/可能需要一段时间.

我希望能够为Promise.all中的每个promise设置超时,因此它可以尝试最多花费5秒.

getData() {
    var that = this;
    var tableUrls = ['http://table-one.com','http://table-two.com'];
    var spoonUrls = ['http://spoon-one.com','http://spoon-two.com'];

    var tablePromises = that.createPromise(tableUrls);
    var spoonPromises = that.createPromise(spoonUrls);
    var responses = {};

    var getTableData = () => {
        var promise = new Promise((resolve, reject) => {
            Promise.all(tablePromises.map(that.rejectResolveHandle))
                .then((results) => {
                    responses.tables = results.filter(x => x.status === 'resolved');
                    resolve(responses);
                });
        });
        return promise;
    };

    var getSpoonData = () => {
        var promise = new Promise((resolve, reject) => {
            Promise.all(spoonPromises.map(that.rejectResolveHandle))
                .then((results) => {
                    responses.tables = results.filter(x …

我是Gulp的新手..我已经能够成功安装和连接并缩小我的.js和.css文件,但是,有一个我要排除的.css文件 - print.css

我按照这里的说明操作:https://www.npmjs.org/package/gulp-ignore在我的本地目录中安装gulp-ignore,并将我的gulpfile.js修改为:

// Include gulp
var gulp = require('gulp'); 

// Include Our Plugins
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minifyCSS = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var exclude = require('gulp-ignore').exclude;


var paths = {
  scriptsNonAuth: ['Non-Auth/javascript/*.js'],
  scriptsAuth: ['Auth/javascript/*.js'],
  stylesNonAuth: ['Non-Auth/css/*.css'],
  stylesAuth: ['Auth/css/*.css'],
};

// CSS Task - Non Authenticated
gulp.task('minify-css-non-auth', function() {
  gulp.src(paths.stylesNonAuth)
    .pipe(minifyCSS(opts))
    .pipe(concat('all.min.css'))
    .pipe(gulp.dest('Non-Auth/css'))
});

// CSS Task - Authenticated
gulp.task('minify-css-auth', function() { …

当我的绑定数据包含特定的单词或文本时,我熟悉使用ng-show和ng-hide.例如:

<div ng-show="myArray.Length > 20">
    Show something
</div>

<div ng-show="myData.Name == 'Harry Roberts'">
    Show something
</div>

但是,如何ng-show显示绑定数据何时包含某个值,例如"当前".例如,如果我的JSON数据:

{
    "MyAddresses": [
        {
            "Entry"  : "1",
            "Period" : "2011 - current",

        }, {
            "Entry"  : "2",
            "Period" : "2003 - 2011",

        }, {
            "Entry"  : "3",
            "Period" : "1998 - 2001",

        }
    ]
}


<div ng-show="myData.MyAddresses.Period ~ 'Current'">
    Show something
</div>

我正在尝试写一个类似的小无限滚动到这里找到的:http://jsfiddle.net/vojtajina/U7Bz9/

我已经能够显示前5个数据,但是在滚动时,其他项目没有显示.

HTML:

<div id="fixed" directive-when-scrolled="loadMore()">
  <ul>
    <li ng-repeat="i in items | limitTo: 5">{{ i.Title }}</li>
  </ul>  
</div>

JS:

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.items = [
    {
       "Title":"Home"
    },
    {
       "Title":"Contact"
    },
    {
       "Title":"Help"
    },
    {
       "Title":"About"
    },
    {
       "Title":"Our Offices"
    },
    {
       "Title":"Our Locations"
    },
    {
       "Title":"Meet the Team"
    }
    ,
    {
       "Title":"Our Mission"
    },
    {
       "Title":"Join Us"
    },
    {
       "Title":"Conferences"
    },
    {
       "Title":"Tables"
    },
    {
       "Title":"Chairs"
    } 
  ]; …

通常我写SPA并在控制器之间共享数据对于服务来说很简单.

我没有使用SPA格式(不使用ng-view),并尝试在页面之间共享数据,但在加载第二页(获取数据)时为空.

PAGE1(index.html):

<div ng-controller="CreateList">
    <input type="text" ng-model="myValue">
    <div ng-click="share(myValue)">Share</div>
</div>

第2页:

<div ng-controller="GeList">
    <p>{{ sharedData  }}</p>
</div>

JS:

app.controller('CreateList', function($scope, $location, $http, serviceShareData) {

    $scope.share= function (selectedValue) {

        if (selectedValue === undefined ) {
            console.log ("its undefined");
        }       
        else {
            console.log (selectedValue);

            serviceShareData.addData(selectedValue);
            window.location.href = "PAGE2.html";
        }
    }

});


app.controller('GeList', function($scope, $location, $http, serviceShareData) { 

    $scope.sharedData = serviceShareData.getData();

    console.log($scope.sharedData);

});

app.service('serviceShareData', function() {
    var myData = [];

    var addData = function(newObj) {
        myData.push(newObj);
    }

    var getData = function(){
        return …

我有一个简单的控制器:

app.controller("RegisterController", function ($scope, $location) {

    // Do something

});

而我所要做的就是测试这个控制器的定义:

describe('RegisterController', function() {

    var $rootScope, $scope, $controller;

    beforeEach(module('myApp'));

    beforeEach(inject(function(_$rootScope_, _$controller_){
        $rootScope = _$rootScope_;
        $scope = $rootScope.$new();
        $controller = _$controller_;

        $controller('RegisterController', {'$rootScope' : $rootScope, '$scope': $scope});
    }));

    it('should exist', function() {
        expect($controller).toBeDefined();
    });
});

我收到以下错误:

TypeError: undefined is not a function