我有一个输入字段，我希望读者能够搜索已经使用Angular＆＃39; ng-repeat.放到页面上的商家。现在，当我输入搜索字段时，它没有＆ ＃39; t过滤其中任何一个。
想知道gulpfile.js是否存在问题，以及它是如何编译我的构建文件夹的。其他可能性包括错误使用指令ng-model或我的ng-controller="MainCtrl"是否在错误的位置？
目前，我正在使用Foundation for Apps，其中包括Angular视图和路由。我已经在下面添加了一个指向我的Github和代码示例的链接。
将ng-controller="MainCtrl"放在标题中似乎不起作用，而是在编译时企业不会显示。
// FOUNDATION FOR APPS TEMPLATE GULPFILE
// -------------------------------------
// This file processes all of the assets in the "client" folder, combines them with the Foundation for Apps assets, and outputs the finished files in the "build" folder as a finished app.
// 1. LIBRARIES
// - - - - - - - - - - - - - - -
var $ = require('gulp-load-plugins')();
var argv = require('yargs').argv;
var gulp = require('gulp');
var rimraf = require('rimraf');
var router = require('front-router');
var sequence = require('run-sequence');
// Check for --production flag
var isProduction = !!(argv.production);
// 2. FILE PATHS
// - - - - - - - - - - - - - - -
var paths = {
assets: [
'./client/**/*.*',
'!./client/templates/**/*.*',
'!./client/assets/{scss,js}/**/*.*'
],
// Sass will check these folders for files when you use @import.
sass: [
'client/assets/scss',
'bower_components/foundation-apps/scss'
],
// These files include Foundation for Apps and its dependencies
foundationJS: [
'bower_components/fastclick/lib/fastclick.js',
'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js',
'bower_components/tether/tether.js',
'bower_components/hammerjs/hammer.js',
'bower_components/angular/angular.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-ui-router/release/angular-ui-router.js',
'bower_components/foundation-apps/js/vendor/**/*.js',
'bower_components/foundation-apps/js/angular/**/*.js',
'!bower_components/foundation-apps/js/angular/app.js'
],
// These files are for your app's JavaScript
appJS: [
'client/assets/js/*.js'
// 'client/assets/js/app.js'
]
}
// 3. TASKS
// - - - - - - - - - - - - - - -
// Cleans the build directory
gulp.task('clean', function(cb) {
rimraf('./build', cb);
});
// Copies everything in the client folder except templates, Sass, and JS
gulp.task('copy', function() {
return gulp.src(paths.assets, {
base: './client/'
})
.pipe(gulp.dest('./build'))
;
});
// Copies your app's page templates and generates URLs for them
gulp.task('copy:templates', function() {
return gulp.src('./client/templates/**/*.html')
.pipe(router({
path: 'build/assets/js/routes.js',
root: 'client'
}))
.pipe(gulp.dest('./build/templates'))
;
});
// Compiles the Foundation for Apps directive partials into a single JavaScript file
gulp.task('copy:foundation', function(cb) {
gulp.src('bower_components/foundation-apps/js/angular/components/**/*.html')
.pipe($.ngHtml2js({
prefix: 'components/',
moduleName: 'foundation',
declareModule: false
}))
.pipe($.uglify())
.pipe($.concat('templates.js'))
.pipe(gulp.dest('./build/assets/js'))
;
// Iconic SVG icons
gulp.src('./bower_components/foundation-apps/iconic/**/*')
.pipe(gulp.dest('./build/assets/img/iconic/'))
;
cb();
});
// Compiles Sass
gulp.task('sass', function () {
return gulp.src('client/assets/scss/app.scss')
.pipe($.sass({
includePaths: paths.sass,
outputStyle: (isProduction ? 'compressed' : 'nested'),
errLogToConsole: true
}))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie 10']
}))
.pipe(gulp.dest('./build/assets/css/'))
;
});
// Compiles and copies the Foundation for Apps JavaScript, as well as your app's custom JS
gulp.task('uglify', ['uglify:foundation', 'uglify:app'])
gulp.task('uglify:foundation', function(cb) {
var uglify = $.if(isProduction, $.uglify()
.on('error', function (e) {
console.log(e);
}));
return gulp.src(paths.foundationJS)
.pipe(uglify)
.pipe($.concat('foundation.js'))
.pipe(gulp.dest('./build/assets/js/'))
;
});
gulp.task('uglify:app', function() {
var uglify = $.if(isProduction, $.uglify()
.on('error', function (e) {
console.log(e);
}));
return gulp.src(paths.appJS)
.pipe(uglify)
.pipe($.concat('app.js'))
.pipe(gulp.dest('./build/assets/js/'))
;
});
// Starts a test server, which you can view at http://localhost:8080
gulp.task('server', ['build'], function() {
gulp.src('./build')
.pipe($.webserver({
port: 8080,
host: 'localhost',
fallback: 'index.html',
livereload: true,
open: true
}))
;
});
// Builds your entire app once, without starting a server
gulp.task('build', function(cb) {
sequence('clean', ['copy', 'copy:foundation', 'sass', 'uglify'], 'copy:templates', cb);
});
// Default task: builds your app, starts a server, and recompiles assets when they change
gulp.task('default', ['server'], function () {
// Watch Sass
gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['sass']);
// Watch JavaScript
gulp.watch(['./client/assets/js/**/*', './js/**/*'], ['uglify:app']);
// Watch static files
gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*'], ['copy']);
// Watch app templates
gulp.watch(['./client/templates/**/*.html'], ['copy:templates']);
});
---
name: home
url: /
---
<header>
<p class="sponsored">Sponsored by </p>
<img src="http://placehold.it/200x30" class="sponsors" alt="">
<h1>Business Directory</h1>
<div class="find">
<label for="looking">
<i class="fa fa-search"></i>
</label>
<input type="search" placeholder="What are you looking for?" ng-model="query">
<input type="submit">
</div><!-- /.find -->
<ul>
<li class="popular">Popular searches:</li>
<li>tk-category <span>|</li>
<li>tk-category <span>|</span></li>
<li>tk-category <span>|</span></li>
<li>tk-category <span>|</span></li>
<li>tk-category </li>
</ul>
</header>
<div class="businesses">
<p class="number">tk-number of businesses</p><button class="filter button">Filter by <i class="fa fa-chevron-down"></i></button>
<div class="options">
<div class="cat">
<div class="categories">
<div class="group">
<p class="name">Grade Level</p>
<div class="check">
<input type="radio" name=""><p>Auto</p>
<input type="checkbox" name=""><p>Restaurant</p>
<input type="checkbox" name=""><p>Other</p>
</div><!-- /.check -->
</div><!-- /.group -->
<div class="group">
<p class="name">School Type</p>
<div class="check">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div><!-- /.check -->
</div><!-- /.group -->
</div><!-- /.categories -->
</div><!-- /.cat -->
</div><!-- /.options -->
</div><!-- /.businesses -->
<div class="all" ng-controller="MainCtrl">
<div class="business large-4.columns" data-ng-repeat="business in businesses | filter:query" >
<div class="overlay">
<img src="http://placehold.it/300x300" class="storefront" alt="">
</div><!-- /.overlay -->
<div class="info">
<p class="name">{{business.name}}</p>
<p class="description">{{business.description}}</p>
<p class="address">{{business.address}}</p>
<a href="" class="website">{{business.website}}</a>
</div><!-- /.info -->
</div>
</div>
<footer>
<p>Back to top</p>
</footer>
<!-- <div class="buttons">
<button class="alp">Alphabetically</button>
<button class="exp">Expanded</button>
<button class="con">Condensed</button>
</div> -->
<!-- <div class="grid-container"> -->
<!-- </div> -->
<!doctype html>
<html lang="en" ng-app="application">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Brandon Sun Business Directory</title>
<link href="/assets/css/app.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="grid-frame vertical">
<div class="grid-content shrink" style="padding: 0;">
<div class="primary condense menu-bar">
<div class="logo">
<img src="http://placehold.it/80x45" class="bdnsun" alt="">
<div class="social">
<a href="" class="click"><i class="fa fa-twitter"></i></a>
<a href="" class="click"><i class="fa fa-facebook"></i></a>
</div><!-- /.social -->
</div><!-- /.logo -->
</div>
</div>
<div ui-view class="grid-content">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="/assets/js/foundation.js"></script>
<script src="/assets/js/templates.js"></script>
<script src="/assets/js/routes.js"></script>
<script src="/assets/js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.js"></script>
</body>
</html>
myApp.controller('MainCtrl', function($scope) {
$scope.businesses = [
{
id: 0,
name: "Andrew Nguyen",
description: "I'm a web developer",
address: "322 11th Street, Brandon, MB",
website: "http://andrewnguyen.ca"
},
{
id: 1,
name: "Mary Yacoubian",
description: "I'm a dental hygenist",
address: "18 Wishford Drive",
website: "http://quitecontrary.com"
},
{
id: 2,
name: "John Axon",
description: "I'm a jack of all trades",
address: "1101 Mississauga Rd.",
website: "http://johnaxon.com"
}
]
});
'use strict';
var myApp = angular.module('application', [
'ui.router',
'ngAnimate',
//foundation
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'
])
.config(config)
.run(run)
;
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
$locationProvider.hashPrefix('!');
}
function run() {
FastClick.attach(document.body);
}