小编scn*_*iro的帖子

如何使用angular-ui-utils将活动类应用于navbar?

我是angularJS的初学者,我正在使用node/bower/grunt为angularJS中的单页应用程序开发ui,我已经安装了angular-ui-bootstrap和来自angular-ui-utils的路由和事件工具.
我已经ng-class={active:$uiRoute}在菜单项上使用了但是当选择了一个菜单项时,没有应用活动类...是否$uiRoute处理了这个或者我是否需要单独编写它?

问一个愚蠢的问题道歉...
这是代码:

`<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li ui-route="/" ng-class="{active:$uiRoute}"><a href="#/">Home</a></li>
    <li ui-route="/about" ng-class="{active:$uiRoute}"><a href="#/about">About</a></li>
    <li ui-route="/other" ng-class="{active:$uiRoute}"><a href="#/other">Other</a></li>
  </ul>
</div>
...
<script src="bower_components/angular-ui-utils/modules/route/route.js"></script>
<script src="bower_components/angular-ui-utils/modules/event/event.js"></script>`
Run Code Online (Sandbox Code Playgroud)

angular.module('myApp', ['ngRoute','ngResource','ui.bootstrap'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutCtrl'
  })
  .when('/other', {
    templateUrl: 'views/other.html',
    controller: 'OtherCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
})
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angular-ui

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

从VS 2015 Task Runner资源管理器运行时,Gulp任务失败,但不是从命令提示符运行

我有一些Gulp工作做典型clean,build,release一个网站的行动.在我看来,没有什么特别不寻常的.(实际上它与Aurelia TypeScript骨架非常相似.)

大多数团队使用GulpPowerShell /命令提示符进行前端开发,并使用VS Code/Sublime进行编辑.一些团队使用Visual Studio 2015做同样的事情.

build从命令提示符运行任务工作正常,但如果我们从Visual Studio的Task Runner Explorer运行它,它会给我们一个错误.

但是,运行其他任务(例如clean)可以在命令提示符和VS Task Runner Explorer中正常工作.

有趣的是,Task Runner explorer甚至会输出它调用以运行任务的进程的副本.如果我复制确切的命令(见下文),并运行在命令提示符下,它并没有给出错误.它仅在从Task Runner Explorer运行时发生,并且仅在该任务中运行.

这是Task Runner Explorer的任务命令行和相关错误输出:

cmd.exe /c gulp -b "D:\Development\xxxx\WebSite" --color --gulpfile "D:\Development\xxxx\WebSite\Gulpfile.js" build
[20:40:42] Using gulpfile D:\Development\xxxx\WebSite\Gulpfile.js
[20:40:42] Starting 'build'...
[20:40:42] Starting 'clean'...
[20:40:42] Finished 'clean' after 5.74 ms
[20:40:42] Starting 'build-system'...
[20:40:42] Starting 'build-html'...
[20:40:42] Starting 'build-css'...
[20:40:42] Finished 'build-css' after 31 ms
[20:40:43] …
Run Code Online (Sandbox Code Playgroud)

javascript node.js gulp visual-studio-2015 task-runner-explorer

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

修复了AngularJS中的头表

我遇到了涉及固定标头表的问题.我正在使用AngularJS和Bootstrap来构建Web应用程序.我无法使用,ng-grid因为它不支持IE7.所以,我正在填充表格行ng-repeat.该应用程序是响应.所以,我不能给单元格/标题赋予固定的宽度.是否有任何简单的方法来固定表头?

用AngularJS固定标头表上放了一个Plunker

提前致谢.

javascript jquery angularjs angularjs-ng-repeat

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

$ watch指令中的元素宽度

我正在尝试$watch在指令中使用元素的宽度:

appDrct.directive('setWidth', function($interval) {
    return {
        require: '?ngModel',
        link: function($scope, $elm, attr, ngModel) {

            $scope.$watch($elm.parent().width(), function() {
                console.log('Width changed');
            });
        }
     }
})
Run Code Online (Sandbox Code Playgroud)

但它不起作用......我知道我的宽度发生了变化(我尝试$interval显示宽度并改变)

javascript angularjs angularjs-directive

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

Gulp minifyCss删除特殊评论

我正在使用gulp minifyCss来缩小我的CSS以减少​​文件大小.我的gulp任务看起来像这样:

gulp.task('minify-css', function() {
  return gulp.src('styles/*.css')
    .pipe(concatCss("all.css").on('error', standardHandler))
    .pipe(minifyCss().on('error', standardHandler))
    .pipe(gulp.dest('dist'));
});
Run Code Online (Sandbox Code Playgroud)

它工作正常,并按预期输出.但是,它不会删除特殊注释/*! comment */

如何让minifyCss删除特殊注释?

css gulp gulp-minify-css gulp-clean-css

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

为什么我不能在react-router 4.x中嵌套Route组件?

世界上如何在react-router中使用嵌套路由,特别是版本4.x?以下版本在以下版本中运行良好...

<Route path='/stuff' component={Stuff}>
  <Route path='/stuff/a' component={StuffA} />
</Route>
Run Code Online (Sandbox Code Playgroud)

升级到4.x会发出以下警告......

警告:您不应在同一路径中使用<Route>组件和<Route children>; <Route children>将被忽略

到底发生了什么事?我已经搜索了几个小时的文档,无法成功地使嵌套路由工作.如何使用<Route>组件在react-router v4中嵌套其路由?我的简单示例如何转换为嵌套路由的v4.x API合规性?

javascript reactjs react-router react-router-v4

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

angular.js - 定义实用程序库的最佳实践

我正在使用angular给出我的第一步,我需要定义一个实用程序帮助程序库,其中包含一些函数方法,类似于

dataHelper.parse,dataHelper.sanitize

以角度组织它的推荐方法是什么?

module organization modularization angularjs

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

使用带有browserify的角度模板缓存

我正在使用browserify构建一个小角度应用程序ui-router.由于我不想使用服务器,我想使用angular $templateCache这样存储我的所有模板:

exports.templateCache = ["$templateCache", function($templateCache) {
  'use strict';

  $templateCache.put('partials/someState.html',
    "myHtmlCode"
  );
}];
Run Code Online (Sandbox Code Playgroud)

要填充缓存,我使用grunt查看我的partials文件夹,获取所有html并将其加载到缓存中grunt-angular-templates:

 ngtemplates:  {
  myApp: {
    cwd: 'dist/',
    src: 'partials/**.html',
    dest: 'src/js/templates/templates.js',
    options: {
      bootstrap:  function(module, script) {
        return 'exports.templateCache = ["$templateCache", function($templateCache) {\n' +
          script +
          '}];'
      }
    }
  }
},
Run Code Online (Sandbox Code Playgroud)

然后我使用browersify将我所有的js组合在一起:

browserify: {
  dist: {
    files: {
      'dist/js/app.js': [
          'src/js/templates/**',
          'src/app.js'
          ],
    }
  }
},
Run Code Online (Sandbox Code Playgroud)

这个工作到目前为止,但这个工作流对我来说看起来很笨重:我有一个中间步骤,我templates.js在我的src目录中创建文件,我在我的grunt文件中有硬编码的代码.

有没有办法更优雅地做到这一点?browserify是否附带内置解决方案来解决这个问题?

javascript caching angularjs browserify gruntjs

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

如何在ui-grid中获取过滤后的行?

使用ui-grid我想使用过滤器获取所有过滤数据行的列表.

在下面的plunker中,我将500个项目的原始数据过滤到61.现在如何获得这61个实体的列表?

plnkr链接

如果我使用以下代码,我只获得在屏幕上呈现的行

var _renderedRows = $scope.gridApi.grid.renderContainers.body.renderedRows;
Run Code Online (Sandbox Code Playgroud)

单击该plunker底部的按钮显示过滤行的数量,仅为14而不是61.如果我的过滤器中有14个或更少,则可以完美地工作,因为我可以从上面访问实体对象.但我看不到网格中暴露过滤行的任何属性.

那么如何才能获得61的列表,以便我可以将它们传递给另一个函数来对它们执行操作?

javascript angularjs angular-ui-grid

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

Vue.js CLI 3 - 如何为CSS/Sass创建供应商包?

使用@vue/cli3.x和我vue.config.js稍微修改了我的.我希望有单独的CSS文件,例如app.cssvendor.css(从Sass转换而来) - 类似于它如何配置来处理JavaScript.我不确定如何设置正确的配置来实现这一目标.我错误地加载了我的文件吗?完全错过了标记?

// vue.config.js
module.exports = {
  // [...]
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          shared: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            enforce: true,
            chunks: 'all',
          }
        }
      }
    }
  }
};
Run Code Online (Sandbox Code Playgroud)

我的构建结果在哪...

dist
??? css
|   ??? app.css
??? js
|   ??? app.js
|   ??? vendor.js
Run Code Online (Sandbox Code Playgroud)

app.css包括我通过我进口的所有东西node_modules.我的主要App.vue组件中的样式导入如下...

<style lang="scss">
  @import '../node_modules/minireset.css/minireset.sass';
</style>

// [...]
Run Code Online (Sandbox Code Playgroud)

我想要的结果是以下结构,其中"供应商"CSS/Sass被提取出来......

dist
??? css
|   ??? app.css
|   ??? …
Run Code Online (Sandbox Code Playgroud)

javascript node.js webpack vue.js

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