标签: angular-ui
在Directive运行之前,AngularJS通过AJAX检索数据
我正在使用AngularUI的uiMap指令来实例化谷歌地图.uiMap指令适用于硬编码数据({mapOptions}和[myMarkers]); 但是当我通过$http.get()(在AJAX调用完成之前指令触发)检索此数据时遇到了麻烦.
最初我在我的GoogleMaps控制器中执行GET ,但是当我意识到事情发生的时候,我把GET转移到了uiMap指令中.我有两个问题:
- 我认为这不是正确的方法.
- GET还检索数据
[myMarkers]- 创建标记的函数/指令无处不在,因为它负责创建所有叠加层
所以我的问题是,是否在应用程序的其他地方我可以在指令运行之前检索数据(并将其应用于范围)？
我读了$ q,这听起来像我想要的,但我不确定我是否可以在我的控制器中而不是在指令中做到(也不确定$q.defer.resolve()有什么不同$http.success()).
编辑我使用的大部分代码都是从AngularUI的doc中复制/粘贴,但这里有一个插件:http://plnkr.co/edit/t2Nq57
解
<!-- index.html -->
<div
id="map_container"
ng-controller="GoogleMaps">
<div ui-if="mapReady">
<div
ng-repeat="marker in markers"
ui-map-marker="markers[$index]"
ui-event="{'map-click':'openMarkerInfo(marker)'}"
></div>
<div
ui-map-info-window="myInfoWindow"
ng-include="'infobox.html'"
></div>
<div
id="map_canvas"
ui-map="myMap"
ui-options="mapOptions"
></div>
</div>
</div>
警告1 uiIf不能在指定控制器提供其条件的同一元素中(uiIf具有比ngController更高的优先级,因此在uiIf执行之前它的控制器不会被设置).
警告2请务必使用最新版本的uiIf(最新标签v0.3.2中提供的版本已过期).在某些情况下,旧的错误导致TypeError.
必须在AngularJS之前包含警告3 jQuery(在index.html中); 否则你会收到一个TypeError声明Object [object Object] has …
推荐指数
解决办法
查看次数
以编程方式控制angular-ui手风琴的好方法是什么？
我正在使用来自http://angular-ui.github.com/bootstrap/的手风琴指令,我需要更多地控制手风琴何时打开和关闭.
更确切地说,我需要一个手风琴组内的按钮,它将关闭其母手风琴并打开下一个手风琴(所以基本上模仿如果close-others设置为true,点击下一个标题会做什么).我还需要做一些验证才能允许关闭手风琴并打开下一个,我还需要将其连接到手风琴标题上的单击事件.
我对angular非常新,我们目前正在将Backbone + JQuery的应用程序重写为Angular.在Backbone版本中,我们使用Twitter Bootstrap手风琴,我们使用JQuery打开和关闭它们.虽然我们仍然可以继续这样做,但我宁愿彻底摆脱JQuery DOM操作,所以我正在寻找一个纯粹的角度解决方案.
我在验证方面尝试做的是
<accordion-group ng-click="close($event)">
在我的控制器里
event.preventDefault();
event.stopPropagation();
这显然不起作用,因为DOM元素被指令替换,并且从不添加点击处理程序.我一直在浏览源代码(并找到了一些非常好的无记录功能),但我甚至不知道在哪里开始解决这个特定的挑战.我正在考虑分配angular-ui并尝试将此功能添加到accordion指令中,但如果我能够在不修改指令的情况下实现这一点,那将会更好.
推荐指数
解决办法
查看次数
动态templateUrl - AngularJS
从Angular 1.1.4开始,您可以拥有一个动态模板URL.从这里开始,
templateUrl - 与模板相同,但模板是从指定的URL加载的.由于模板加载是异步的,因此编译/链接将暂停,直到加载模板为止.
您可以将templateUrl指定为表示URL的字符串,或者指定为带有两个参数tElement和tAttrs的函数(在下面的编译函数api中描述)并返回表示url的字符串值.
如何利用它来生成基于我的指令属性的动态模板？显然这不起作用,因为tAttrs.templateType只是字符串"templateType"
templateUrl: function (tElement, tAttrs) {
if (tAttrs.templateType == 'search') {
return '/b/js/vendor/angular-ui/template/typeahead/typeahead.html'
} else {
return '/b/js/vendor/angular-ui/template/typeahead/typeahead2.html'
}
}
鉴于我无法访问范围,我该如何管理？
推荐指数
解决办法
查看次数
Angular UI Router - 处于继承状态的视图
编辑:基于@ actor2019的回答我想更新我的问题以更好地解释问题:
使用Angular UI-Router(v0.0.2),我设置应用程序以在主要"页面"/状态之间正确导航,同时继承基本状态.
index.html的:
<div ui-view></div>
base.html文件:
<!-- Header -->
<div>
<!-- Header markup -->
<!-- Search View -->
<div ui-view="search"></div>
</div>
<!-- Page Content view -->
<div ui-view></div>
问题出在app.js文件中.当我将views参数添加到base状态时,一切都停止工作(100%空白页).没有该参数,页面呈现正确,但我没有搜索视图.
app.js:
$urlRouterProvider.otherwise('/');
//
// Now set up the states
$stateProvider
.state('base', {
abstract: true,
templateUrl: 'views/base.html',
views: {
"search": {
templateUrl: "views/search.html"
}
}
})
.state('base.home', {
url: "/",
templateUrl: "views/home.html"
})
.state('base.page2', {
url: "/page2",
templateUrl: "views/page2.html"
});
如何向此父级"基础"状态添加视图？
更新: @ …
javascript angularjs angular-ui angular-routing angular-ui-router
推荐指数
解决办法
查看次数
一个AngularUI Router状态共享范围中的两个视图
我是AngularUI路由器的新手,并希望将它用于以下场景:
所有页面共有的布局包括顶部导航栏,其中包含右侧带有按钮的菜单,以及填充下方空间的内容部分.该页面有几个页面,我映射到UI路由器状态(第1页,第2页,...).每个页面都有自己的菜单项和自己的内容.该菜单需要与内容共享范围,因为它们交互(例如保存按钮提交的内容形式,它应该只如果表单有效启用).
HTML大致如下所示:
<body>
<nav class="...">
<h1>my site</h1>
<div>MENU SHOULD GO HERE</div>
</nav>
<div class="row">
<div class="column ...">
CONTENT SHOULD GO HERE
</div>
</div>
</body>
现在,我正在为每个州使用两个并行视图和两个控制器.但是这样,两个示波器/控制器无法交互.
那你怎么做到这一点？
推荐指数
解决办法
查看次数
Angular-UI模态解析
亲爱的我是Angularjs的新手我正在用Angular创建一个模态.我在网上找到的一个例子就是我很难理解
$scope.checkout = function (cartObj) {
var modalInstance = $modal.open({
templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html',
controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) {
}],
resolve : { // This fires up before controller loads and templates rendered
cartObj : function() {
return cartObj;
}
}
});
令我困惑的是cartObj,我已经收到的作为我的函数的参数通过依赖注入传递给我的控制器.但是为什么我必须创建一个名为cartObj的函数并返回该变量.这似乎令人困惑.有人可以帮忙吗？
推荐指数
解决办法
查看次数
$ scope.myVariable未在控制器中更新angular-ui bootstrap模式
在我看来,我有一个输入,一个跨度和一个按钮,如下所示:
<script type="text/ng-template" id="myTemplate.html">
<input type="text" ng-model="phoneNumber">
<span>{{ phoneNumber}}</span>
<input type="button" ng-click="click()">
</script>
在文本框中键入时,span更新的内容按预期读取.但是当单击按钮时,phoneNumber控制器内部没有更新:
app.controller('myPopopCtrl', ['$scope', '$modalInstance',
function ($scope, $modalInstance) {
$scope.phoneNumber= '';
$scope.click = function() {
alert($scope.phoneNumber); // alerts only ''
};
是否有一些新的错误,你可以在角度,这使得内容不能在$scope控制器内部更新？
我需要注意的angular-ui模式是否存在一些范围问题？
编辑:
它似乎是phoneNumber在2个范围内创建的.有一次在蓝色箭头phoneNumber: ''的范围内,在红色箭头的儿童范围内和一次.视图使用phoneNumber子范围,控制器使用phoneNumber父范围...
为什么要创建两个范围？
推荐指数
解决办法
查看次数
如何从angular-ui/ui-tinymce配置tinymceOptions
我决定在我的博客上使用ui-tinymce(tinymce的角度版本).但我找不到相同的文档.将欣赏有关配置tinymceOptions的任何资源或任何建议.
这是git链接 - https://github.com/angular-ui/ui-tinymce
推荐指数
解决办法
查看次数
使用go函数在状态之间传递数据的Angular UI-Router不起作用
我刚开始学习angularjs,我正在使用angular-ui-router.我试图将数据从一个州发送到另一个州,$state.go但我没有成功.这是我到目前为止:
我没有故意包含html,因为我认为如果需要它不需要请告诉我,我会添加它.
我已将状态配置如下:
$stateProvider
.state('public', {
abstract: true,
templateUrl: 'App/scripts/main/views/PublicContentParent.html'
})
.state('public.login', {
url: '/login',
templateUrl: 'App/scripts/login/views/login.html',
controller: 'loginCtrl'
})
$stateProvider
.state('private', {
abstract: true,
templateUrl: 'App/scripts/main/views/PrivateContentParent.html'
})
.state('private.visits', {
url: '/visits',
views: {
'main': {
controller: 'visitsListCtrl',
templateUrl: 'App/scripts/visits/views/VisitsList.html'
}
}
});
当我LoginController被调用时,它将执行以下代码:
loginModule.controller('loginCtrl', ['$state', function ($scope, $state) {
$state.go('private.visits', { name : "Object"});
}]);
当private.visits页面处于活动状态,我试图打印$stateParams:
visitsModule.controller('visitsListCtrl', ['$stateParams',
function ($stateParams) {
console.log($stateParams);
}]);
事物状态$ stateParams是一个空对象.我希望它包含我在loginCtrl中传递的对象.
编辑
看来如果private.visitsurl有这个url格式'/visits/:name',我还添加了属性params:["name"]我可以访问我从 …
推荐指数
解决办法
查看次数
javascript没有正确地将角度ui datepicker日期转换为UTC
我在我的项目中使用了角度ui datepicker(asp.net web api + angularjs).一切正常,但是当我试图将日期保存到Db时,它没有正确地将它转换为UTC格式并且导致1天(实际上是几个小时,但它也影响了一天).
例如,当我在datepicker中选择01/11/2014时:
Angularjs object:
Sat Nov 01 2014 00:00:00 GMT+0200 (FLE Standard Time)
In request:
2014-10-31T22:00:00.000Z
In asp.net api controller:
{31-Oct-14 10:00:00 PM}
Datepicker控制器:
app.controller('DatepickerCtrl', function ($scope) {
$scope.today = function () {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
$scope.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.format = 'dd/MM/yyyy';
$scope.dateOptions = {
'starting-day': 1
};
});
hnml:
<div class="form-group inputGroupContainer" ng-controller="DatepickerCtrl">
<label …推荐指数
解决办法
查看次数