博客分类：
&body ng-controller="MainCtrl"&
&div ng-click="goUrl('')"&
&button type="button" ng-click="doSomeSth();$event.stopPropagation();"&button&/button&
JS防止冒泡事件：
浏览: 2626448 次
来自: 上海
sxx, bucunzai kuaibukuaile, jia ...
这不是邮编，这是区号
刚开始以为被黑客盯上了呢，太坑了，谢谢博主。
真是太坑爹了
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'博客分类：
配置angularjs项目运行环境的几个步骤
1--安装git，使用命令git --version；
2--安装nodejs，下载地址：官网http://www.nodejs.org/download/，默认是安装在C:\Program Files\nodejs。使用命令node -v；
安装npm，由于nodejs已经集成了npm，所以此时npm已经安装好了。使用命令npm -v；
3--安装Yeoman，包括yo，Grunt，和Bower。
yeoman的目标是通过Grunt和Bower的包装为开发者创建一个易用的工作流，解决零散的依赖关系。
yo是脚手架工具，用于构建一个新的项目框架；
Grunt是项目的构建工具，一个用于开发任务自动化的命令行工具；
Bower是一个HTML、CSS、Javascript和图片等前端资源的包管理器，不再需要手动去下载scripts了；
npm install -g yo grunt-cli bower
npm install -- global yo
使用命令：yo --version && bower --version && grunt --
看看路径C:\Users\wangmingfeng\AppData\Roaming\npm 下是否有生成的文件和文件夹；
4--在使用AngularJS的生成器之前，运行下面的脚本：使用它来生成AngularJS应用的基础结构
npm install -g generator-angular
npm install -g generator-karma
看看路径C:\Users\wangmingfeng\AppData\Roaming\npm\node_modules 下是否有生成的文件和文件夹；
5--新建空的项目目录，比如myapp,然后在目录中运行下面的命令：
yo angular
grunt serve
常见问题：
1、如果依次运行完这3个命令，浏览器弹出来显示的url中含!(比如：http://localhost:9000/#!/)，那么这是有问题的。可以考虑把能正常运行的项目中的bower_components文件夹下的所有文件拷贝过来替换掉要运行的项目中。
http://localhost:9000/#/menu/home?pa=&pb=XXX&pc=false
2、app-server和app-client，用grunt build命令打包app-client,然后修改目录下scripts中的scripts*.js文件里面的内容，例如APIRoot：10.8.8.9:9000改为发布的服务器访问地址；然后就可以把打包后的app-client扔到服务器比如/usr/local/nginx/html/下面。
3、前端包在执行npm install 、 bower install 、 grunt serve 3个命令可以运行；但是在打包的时候即执行grunt build命令的时候打包会中止，报"Aborted due to warnings",详见下面截图：
Running "ngAnnotate:dist"&ngAnnotate& task
Warning: Cannot create property '$methodName' on boolean 'false' Use --fore to continue.
经研究发现将项目根目录下的package.json中的" "grunt-ng-annotate": "^0.10.0","版本号改为"1.0.0"，然后再执行npm install bower install grunt build即可，应该是版本不兼容引起的。
Franciswmf
浏览: 369961 次
来自: 上海
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'[Angularjs]不能与单击按钮ng-click
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.
当我运行这个呆瓜我按箭头下拉下拉列表中，我假设下拉列表中列出流行 ups 现在但不能
在我的浏览器控制台有没有错误。
为什么不能单击下拉列表中？
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var schoolclassCodeColors = [
{background:'blue'},
{background:'red'}
var newSubject = "test";
var newSchoolclass = "11";
var newSchoolclassIdentifier = "xb";
$scope.activeStep = {};
$scope.activeStep.schoolclassCodeColors = schoolclassCodeC
$scope.activeStep.schoolclassCodeColorsIsOpen =
$scope.activeStep.selectedSchoolclassCodeColor = $scope.activeStep.schoolclassCodeColors[0];
$scope.activeStep.schoolclassCode = function () {
return newSubject + newSchoolclass + newSchoolclassI
$scope.activeStep.setSchoolclassCodeColor = function(color){
$scope.activeStep.selectedSchoolclassCodeColor =
this.schoolclassCodeColorsIsOpen =
.constant('dropdownConfig', {
openClass: 'open'
.service('dropdownService', ['$document', function($document) {
var openScope =
this.open = function( dropdownScope ) {
if ( !openScope ) {
$document.bind('click', closeDropdown);
$document.bind('keydown', escapeKeyBind);
if ( openScope && openScope !== dropdownScope ) {
openScope.isOpen =
openScope = dropdownS
this.close = function( dropdownScope ) {
if ( openScope === dropdownScope ) {
openScope =
$document.unbind('click', closeDropdown);
$document.unbind('keydown', escapeKeyBind);
var closeDropdown = function( evt ) {
// This method may still be called during the same mouse event that
// unbound this event handler. So check openScope before proceeding.
if (!openScope) { }
var toggleElement = openScope.getToggleElement();
if ( evt && toggleElement && toggleElement[0].contains(evt.target) ) {
openScope.$apply(function() {
openScope.isOpen =
var escapeKeyBind = function( evt ) {
if ( evt.which === 27 ) {
openScope.focusToggleElement();
closeDropdown();
.controller('DropdownController', ['$scope', '$attrs', '$parse', 'dropdownConfig', 'dropdownService', '$animate', function($scope, $attrs, $parse, dropdownConfig, dropdownService, $animate) {
var self = this,
scope = $scope.$new(), // create a child scope so we are not polluting original one
openClass = dropdownConfig.openClass,
getIsOpen,
setIsOpen = angular.noop,
toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.
this.init = function( element ) {
self.$element =
if ( $attrs.isOpen ) {
getIsOpen = $parse($attrs.isOpen);
setIsOpen = getIsOpen.
$scope.$watch(getIsOpen, function(value) {
scope.isOpen = !!
this.toggle = function( open ) {
return scope.isOpen = arguments.length ? !!open : !scope.isO
// Allow other directives to watch status
this.isOpen = function() {
return scope.isO
scope.getToggleElement = function() {
return self.toggleE
scope.focusToggleElement = function() {
if ( self.toggleElement ) {
self.toggleElement[0].focus();
scope.$watch('isOpen', function( isOpen, wasOpen ) {
$animate[isOpen ? 'addClass' : 'removeClass'](self.$element, openClass);
if ( isOpen ) {
scope.focusToggleElement();
dropdownService.open( scope );
dropdownService.close( scope );
setIsOpen($scope, isOpen);
if (angular.isDefined(isOpen) && isOpen !== wasOpen) {
toggleInvoker($scope, { open: !!isOpen });
$scope.$on('$locationChangeSuccess', function() {
scope.isOpen =
$scope.$on('$destroy', function() {
scope.$destroy();
.directive('dropdown', function() {
controller: 'DropdownController',
link: function(scope, element, attrs, dropdownCtrl) {
dropdownCtrl.init( element );
.directive('dropdownToggle', function() {
require: '?^dropdown',
link: function(scope, element, attrs, dropdownCtrl) {
if ( !dropdownCtrl ) {
dropdownCtrl.toggleElement =
var toggleDropdown = function(event) {
event.preventDefault();
if ( !element.hasClass('disabled') && !attrs.disabled ) {
scope.$apply(function() {
dropdownCtrl.toggle();
element.bind('click', toggleDropdown);
// WAI-ARIA
element.attr({ 'aria-haspopup': true, 'aria-expanded': false });
scope.$watch(dropdownCtrl.isOpen, function( isOpen ) {
element.attr('aria-expanded', !!isOpen);
scope.$on('$destroy', function() {
element.unbind('click', toggleDropdown);
&body ng-controller="MainCtrl"&
&div class="col-md-6"&
&div class="btn-group" dropdown is-open="activeStep.schoolclassCodeColorsIsOpen"&
&button type="button" ng-style="{{activeStep.selectedSchoolclassCodeColor}}"
class="btn btn-primary dropdown-toggle" ng-disabled="disabled"&
{{activeStep.schoolclassCode()}} &span class="caret"&&/span&
&ul class="dropdown-menu" role="menu"&
&li ng-repeat="color in activeStep.schoolclassCodeColors"&
&a ng-style="{{color}}"
ng-click="activeStep.setSchoolclassCodeColor(color)"&{{activeStep.schoolclassCode()}}&/a&
解决方法 1:
为了使用 dropdownToggle 指令内 class 属性，您需要定义 restrict 权限从指令，包括 C （C姑娘）。例如︰
.directive('dropdownToggle', function() {
restrict: 'AEC',
require: '?^dropdown',
限制选项通常设置为︰
'A'-唯一匹配的属性名称
'E'-只匹配元素名称
'C'-只与类名称相匹配Angularjs 出现弹框后点击确定再返回页面要刷新取回新数据，angularjs怎么写刷新？ - 知乎4被浏览2655分享邀请回答0添加评论分享收藏感谢收起0添加评论分享收藏感谢收起}