我想跑
grunt build
来自创建的目录
yo angular
我通过凉亭安装了angular-ui-bootstrap.本地我需要添加
<script src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
到我的index.html和
angular.module('app', ['ngResource', 'ngCookies', 'ui.bootstrap'])
到我的app.js. 但是每次我尝试构建应用程序时都会出现此错误
错误:没有模块:ui.bootstrap在Error()atUsers/nicholasshook/angular/pokerfund/angular_app/app/components/angular/angular.js:1104:17 at ensure(/ Users/nicholasshook/angular/pokerfund/angular_app /app/components/angular/angular.js:1045:38)在/ Users/nicholasshook/angular模块(/Users/nicholasshook/angular/pokerfund/angular_app/app/components/angular/angular.js:1102:14) /pokerfund/angular_app/app/components/angular/angular.js:2768:24位于forEach的Array.forEach(native)(/Users/nicholasshook/angular/pokerfund/angular_app/app/components/angular/angular.js:131 :11)在/ Users/nicholasshook/angular/pokerfund/angular_app/app/components/angular/angular的loadModules(/Users/nicholasshook/angular/pokerfund/angular_app/app/components/angular/angular.js:2764:5) .js:2769:38在Array.forEach(native)TypeError:无法读取null的属性'awesomeThings'.(/Users/nicholasshook/angular/pokerfund/angular_app/test/spec/controllers/main.js:20:17)
我创建了一个Angular指令,该指令应该在按下转义键时关闭一个模态.模态服务在控制器中使用时工作正常,但由于某种原因,它在该指令中不起作用.hello按下转义时将打印以下代码,但不会隐藏模态.有任何想法吗？
指示
app.directive("dpEscape", function(modal) {
return function(scope, element, attributes) {
element.on("keyup", function(event) {
if (event.keyCode == 27) {
console.log("hello");
modal.hide();
}
});
};
});
我实际上并不认为以下任何代码与问题相关,但我可能是错的.因为我知道人们无论如何都要求它,这里是:
HTML
...
<html ng-app="trread" ng-controller="Main" dp-escape>
...
服务
app.factory("modal", function() {
var urlPath = "/templates/modals/";
var visible = false;
var templateUrl = "";
var content = {};
var controller = {};
var size = {width: 500, height: 500};
var show = function() {
visible = true;
}
var hide = function() {
visible …javascript angularjs angular-ui angularjs-directive angular-ui-bootstrap
我注意到在离子todo应用程序示例中,如果我取消模态并再次打开它,过时/旧的待办事项信息仍保留在模态上.清除/重置旧模态数据的最佳位置是什么,以便在取消或提交模态表单字段后始终有新的空白字段？
我应该删除或清除任务对象吗？在关闭时手动重置字段并创建？为某种隐藏事件添加处理程序？
这是角度/离子的例子:
http://ionicframework.com/docs/guide/building.html
以及相关的代码片段
// Called when the form is submitted
$scope.createTask = function(task) {
$scope.tasks.push({
title: task.title
});
$scope.taskModal.hide();
task.title = "";
};
// Open our new task modal
$scope.newTask = function() {
$scope.taskModal.show();
};
// Close the new task modal
$scope.closeNewTask = function() {
$scope.taskModal.hide();
};
和模态
<div class="modal">
<!-- Modal header bar -->
<ion-header-bar class="bar-secondary">
<h1 class="title">New Task</h1>
<button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
</ion-header-bar>
<!-- Modal content area -->
<ion-content>
<form ng-submit="createTask(task)">
<div class="list">
<label class="item …我正在使用Angular-UI Calendar(Arshaw的fullcalendar的角度版本),而在EventRender上我想在事件元素中添加一个Angular-UI-bootstrap popover.
我试过这些(使用coffeescript):
eventRender: (event, element) ->
element.find(".fc-event-inner").wrap("<div popover='I appeared on mouse enter!' popover-title='The title.' popover-trigger='mouseenter'></div>")
和
eventRender: (event, element) ->
element.find(".fc-event-inner").wrap($compile("<div popover='I appeared on mouse enter!' popover-title='The title.' popover-trigger='mouseenter'></div>")($scope))
$scope.$apply()
但这些似乎都没有做任何事情.我猜第一个问题至少是在角度已经完成它的魔法之后渲染事件.但第二个也没有帮助.使用一些静态元素,popover正常工作.
嗨我是角度js的新手,
我的问题是如何在角度js的标签中添加一个图标？这就是我到目前为止所拥有的:
<tabset panel-tabs="true" panel-class="{{demoTabbedPanelClass}}" heading="{{demoTabbedPanelHeading}}">
<tab heading="Tab 1 some text ">sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
</tab>
<tab heading="Tab 2 ded">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam consectetur sint. Nobis facere illo iste quaerat sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
</tab>
</tabset>
我正在补充 <tab heading="Tab 2 ded <span class="icon-print">print</span>">
但是它显示的内容与标题内部完全相同,而不是像我想象的那样渲染跨度.
请帮我.
我正在使用ui.bootstrap collapse指令来显示下拉菜单.我想在用户点击div之外时自动折叠它.
当用户点击Filter按钮时,我使用以下方法设置焦点:
.directive('setFocus', function () {
return {
restrict: 'A',
scope: {
focusValue: "=setFocus"
},
link: function ($scope, $element, attrs) {
$scope.$watch("focusValue", function (currentValue, previousValue) {
if (currentValue === true && !previousValue) {
$element[0].focus();
console.log('set focus from setFocus directive');
} else if (currentValue === false && previousValue) {
$element[0].blur();
console.log('blurr from setFocus directive');
}
})
}
}
});
HTML
<div collapse="isDropDownCollapsed" class='div2' align-element-right='el1' set-focus='!isDropDownCollapsed' ng-blur="toggleMenu()">
调节器
app.controller('testCtrl', function ($scope) {
$scope.isDropDownCollapsed = true;
$scope.toggleMenu = function () {
$scope.isDropDownCollapsed …我正在尝试以编程方式切换工具提示(如此处提到的:https://stackoverflow.com/a/23377441)并使其完全正常运行,除了一个问题.为了使它工作,我必须具有硬编码的工具提示触发器和工具提示属性,如下所示:
<input type="text" tooltip-trigger="show" tooltip="" field1>
在我的工作指令中,我能够更改工具提示属性并触发工具提示,但是如果我尝试将这两个属性保留并尝试动态设置它们,则ui-bootstrap不会提取它们并且不会显示工具提示.
HTML
<input type="text" field2>
JS
myApp.directive('field2', function($timeout) {
return {
scope: true,
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch('errors', function() {
var id = "field2";
if (scope.errors[id]) {
$timeout(function(){
// these attrs dont take effect...
attrs.$set('tooltip-trigger', 'show');
attrs.$set('tooltip-placement', 'top');
attrs.$set('tooltip', scope.errors[id]);
element.triggerHandler('show');
});
element.bind("click", function(e){
element.triggerHandler('hide');
});
}
});
},
};
});
我不想在html中对这些属性进行硬编码,那么我该如何动态设置这些属性并获取ui-bootstrap来获取它们呢？
这是一个具有工作(field1)和非工作(field2)指令的plunker:http://plnkr.co/edit/mP0JD8KHt4ZR3n0vF46e
以下是我的控制器
angular.module('repoApp')
.controller('loginCtrl', function ($scope,$modal,$state) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
$modal.open({
templateURL: 'views/modals/test.html',
});
});
以下是我的模板:
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
错误是我得到的:
Error: One of template or templateUrl options is required.
at Object.$modalProvider.$get.$modal.open (http://localhost:9000/bower_components/angular-bootstrap/ui-bootstrap-tpls.js:2353:21)
at new <anonymous> (http://localhost:9000/scripts/controllers/login/loginCtrl.js:18:12)
at invoke (http://localhost:9000/bower_components/angular/angular.js:4203:17)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:4211:27)
at http://localhost:9000/bower_components/angular/angular.js:8501:28
at link (http://localhost:9000/bower_components/angular-route/angular-route.js:975:26)
at invokeLinkFn (http://localhost:9000/bower_components/angular/angular.js:8258:9)
at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7768:11)
at compositeLinkFn (http://localhost:9000/bower_components/angular/angular.js:7117:13)
at publicLinkFn (http://localhost:9000/bower_components/angular/angular.js:6996:30) <div ng-view="" class="ng-scope">
这段代码没有打开模板,但是当我使用'template'option并在那里插入模板标记时,它会显示出来.此模板URL未被触发.我已配置我的gruntfile但我不确定是否还要在那里进行任何更改.是否需要在index.html中包含任何lib？
当我选择一个标签时,我想要更改网址.我应该为每个标签创建一个状态吗？
这是我的代码在没有改变状态的情况下工作正常.
我的app.js.
var myApp=angular.module('app', ['ui.router','ngAnimate', 'ui.bootstrap']);
myApp.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('/', {
url: "",
views: {
"ratios": { templateUrl: "views/requetes.html" },
"reqBase": {templateUrl: "views/common.html" },
"SQLconsole": {templateUrl: "views/console.html" },
}
});
$urlRouterProvider.otherwise('/');
}]);
myApp.controller('TabsCtrl', function ($rootScope, $state, $scope, $window) {
$scope.tabs = [
{ title: "ratios", route: "ratios", active: true },
{ title: "requetes de Base", route: "reqBase", active: false },
{ title: "Console", route: "SQLconsole", active: false },
];
});
标签集定义:
<div data-ng-controller="TabsCtrl">
<uib-tabset>
<uib-tab …如何将现有的angular应用程序升级到Bootstrap版本4.0.0。
我知道这很容易，但是我正在寻找适当的升级过程而不会遇到很多问题，因为我看到很多Bootstrap 4.0.0稳定错误的堆栈溢出。
谢谢，
angularjs ×9
javascript ×3
angular-ui ×2
angular ×1
bootstrap-4 ×1
fullcalendar ×1
gruntjs ×1
modal-dialog ×1
templates ×1
yeoman ×1