我使用angular-ui进行可排序使用ui-sortable指令.是否可以根据范围状态动态启用/禁用可排序功能？所以我需要一个按钮来改变范围属性的状态,并根据这个属性进行排序要么应该工作,要么不工作.
我试图让我的嵌套路线工作,但现在给我两天的艰难时间:(
一级工作正常
两个级别工作正常
三个级别不起作用!
任何人都可以帮帮我吗？
提前致谢
angular.module('settings', []).config(['$stateProvider', '$routeProvider', '$urlRouterProvider', function($stateProvider, $routeProvider, $urlRouterProvider) {
$stateProvider
.state('settings', {
url: '/settings',
template:"Settings",
controller: function(){
console.log('settings');
}
}).
state('settings.branch', {
url: '/{branchId:[0-9]{1,8}}',
template:"Branch",
controller: function(){
console.log('branch');
}
}).
state('settings.branch.prop', {
url: '/prop',
template:"Property",
controller: function(){
console.log('property');
}
});
}]);
'/ settings'正在运行
'/ settings/1234'正在运行
'/ settings/1234/prop'不起作用,总是返回普遍状态'分支'
在控制器中,我有一个$state.transitionTo用于"重定向"到另一个状态的功能.
现在我被困在测试这个功能,我总是得到错误Error: No such state 'state-two'.我怎么测试这个？我完全清楚控制器对其他状态一无所知,但我怎么能模仿这个状态呢？
一些代码:
angular.module( 'mymodule.state-one', [
'ui.state'
])
.config(function config($stateProvider) {
$stateProvider.state('state-one', {
url: '/state-one',
views: {
'main': {
controller: 'MyCtrl',
templateUrl: 'mytemplate.tpl.html'
}
}
});
})
.controller('MyCtrl',
function ($scope, $state) {
$scope.testVar = false;
$scope.myFunc = function () {
$scope.testVar = true;
$state.transitionTo('state-two');
};
}
);
describe('- mymodule.state-one', function () {
var MyCtrl, scope
beforeEach(module('mymodule.state-one'));
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
MyCtrl = $controller('MyCtrl', {
$scope: scope
});
}));
describe('- …我正在开发一个Web应用程序.我正在使用AngularJS将所有文件动态加载到UI中.
1.我有和index.html所有文件将在点击或加载时动态加载.
//index.html
<signin button> <signup button> // etc.,
//on-clicking signin button a SignIn-page will load in the below div
<div id="bodyview"></div>
// end of index.html
现在我的登录页面看起来有点像下面的结构
/*a div where my accordion menu will load when the
*below submit button is clicked*/
<div id="menu"></div>
//other sign-in-form stuff will follow on...
//submit button at the end
<submit button> //only on clicking the submit button the menu will be loaded
现在我的问题是,虽然我能够加载手风琴menu.html文件,但我无法加载它所依赖的css和js文件.我已经调查了大多数stackoverflow讨论和许多其他的..但没有一个对我有用.
任何人都可以帮助确定使用Angular JS加载css和js依赖项的方法吗？
任何帮助表示赞赏.提前致谢
我正在努力解决一个特殊的用例.我在底部为您提供了一个jsfiddle代码段.
1. HTML表格
我的HTML是一张桌子.ng-repeat指令必须应用于html元素.在我的用例中,这不能完成,因为ng-repeat的实例由double tr元素组成:
<!-- ng-repeat the following block n times -->
<tr>
<td>text</td>
</tr>
<tr>
<td tooltip="comment that is bound to the first tr">hover me</td>
</tr>
AngularJS不提供语法ng-repeat注释(与KnockoutJS不同).我在SO上发现了类似的问题.但是,用例包括在元素中附加HTML.我将在ng-repeated tr之后放置一个新的tr,但它只是不起作用.此外,还有一些新的东西需要考虑.
2. Tooltip指令
第二个tr嵌入了一个tooltip指令,该指令取自angular-ui-bootstrap.因此,纯jQuery方法可能不可行.
3.我的目标
我为您提供了一个完全不使用ng-repeat的代码片段.我的目标是使用ng-repeat应用于我的集合的每个元素.
angularjs angular-ui angularjs-directive angularjs-ng-repeat
我想要在AngularJS中上传带有加载图像的文件的最佳方法.同时我想将大小限制为10MB.
请给出实现这个目标的最佳方法？
angularjs angular-ui angularjs-directive angularjs-scope angularjs-ng-repeat
我尝试使用angular-ui,并尝试注入$ stateProvider:
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
<script src="test/appModule.js"></script>
</head>
<body>
<div ng-app="appModule">
<div ng-controller="appController">
{{date}}
</div>
</div>
</body>
</html>
js(test/appModule.js)
var module = angular.module("appModule", ['ui.router']);
module.controller('appController', ['$scope', '$stateProvider',
function ($scope, $stateProvider) {
$scope.date = new Date();
}]);
堆栈跟踪
Error: Unknown provider: $stateProviderProvider <- $stateProvider
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js:28:236
...
如果我删除带有注释的$ stateProvider和ui.router,一切都会起作用:
var module = angular.module("appModule"/*, ['ui.router']*/);
module.controller('appController', ['$scope'/*, '$stateProvider'*/,
function ($scope, $stateProvider) {
$scope.date = new …我试图通过ui-router state.go传递参数
但是,我不知道如何传递参数.这是我的代码
app.config(function($stateProvider) {
$stateProvider
.state('first', {
url: '/first',
templateUrl: 'first.html'
})
.state('second', {
url: '/second',
templateUrl: 'second.html'
})
})
//my first.html
app.controller.('firstCtrl' ,["$scope", "$state", function($scope, $state){
$scope.userInput <- come from user
$scope.clickThis=function() {
$state.go("second", $scope.userInput);
}
}]);
//my second.html
app.controller.('secondCtrl,["$scope", "$state", function($scope, $state){
//How do I get the parameter that is passed to here..
})
我可以将页面重定向到second.html,但我似乎无法获取传递给我的secondCtrl的参数.任何人都可以帮我吗？
谢谢.
我在Google地图中有一个动态生成的标记列表.我希望地图的中心成为所有标记的中心,并缩小到足以使所有标记都在视野中.
在计算地图中心方面,也许这可以通过遍历所有纬度和经度并找到中心点来实现.但是,我无法找出计算缩放应该是什么的最佳方法.
这有可能实现吗？
我的地图正在模板中使用,如下所示:
<ui-gmap-google-map events="map.events" center="map.center" zoom="map.zoom" draggable="true" options="options">
<ui-gmap-marker ng-repeat="home in filteredHomes = (resCtrl.filteredHomes | orderBy : $storage.params.orderby : $storage.params.reverseOrder)" coords="{latitude: home.location.latitude, longitude: home.location.longitude}" idkey="home.homeId">
</ui-gmap-marker>
</ui-gmap-google-map>
UPDATE
从@Tiborg的建议尝试Angular实现:
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = {
center: $scope.$storage.params.views.map.location,
zoom: $scope.$storage.params.views.map.zoom,
events: {
click: function() {
var bounds = new google.maps.LatLngBounds();
for (var i in $scope.filteredHomes) {
bounds.extend($scope.filteredHomes[i].location);
}
$scope.map.fitBounds(bounds);
}
}
};
});
这会产生控制台错误: TypeError: undefined is not a function (evaluating 'a.lat()')
构建一个多步骤表单("向导").最初是按照本教程进行的,该教程效果很好,但我现在正在尝试对其进行调整,因此第一步嵌入在主页上,而不是一个单独的状态.无论我尝试什么,我都无法创造一条ui-sref可行的道路.我总是得到:
无法从州'家'解决'.where'
要么
无法从州'home'解析'wizard.where'
要么
无法从州'home'解析'wizard.where @'
...即使wizard.where@工作正常<div ui-view="wizard.where@"></div>.什么是正确的语法？
以下是相关文件:
home.js(左边的评论完好无损,所以你可以看到我正在尝试的各种方法):
var wizard = {
url: '/home/wizard',
controller: 'VendorsCtrl',
templateUrl: 'vendors/wizard.tpl.html'
};
angular.module( 'myApp.home', [
'ui.router',
'ui.bootstrap',
'myApp.modal',
'angularMoment'
])
.config(function config( $stateProvider, $urlRouterProvider ) {
$stateProvider
.state( 'home', {
url: '/home',
views: {
"main": {
controller: 'HomeCtrl',
templateUrl: 'home/home.tpl.html'
},
"jumbotron": {
controller: 'HomeCtrl',
templateUrl: 'home/welcome.tpl.html'
},
"wizard": wizard,
"wizard.where": {
url: '/home/wizard/where',
controller: 'VendorsCtrl',
templateUrl: 'vendors/wizard-where.tpl.html',
parent: …javascript angularjs angular-ui angular-ui-bootstrap angular-ui-router