does anyone know how to get my code working. I'm trying to make a user creation dialog and want to send post data using ngResource, I've already configured my PHP backend and its working as expected. Now, my problem is appending errors on the dialog, I've tried adding dummy data but ngRepeat does not work for me. I've also tried different steps debugging the problem but nothing works for me. I've also researching about the issue but no luck. here is my code:
<div name="errors" id="errors" class="alert alert-error">
<li ng-repeat="error in dialog.errors">{{ error }}</li>
</div>
try to look at the link
http://jsfiddle.net/QCQrF/
#Ryan there were number of things going on in your jsFiddle but the most important problem was the way you were specifying dialog's template. A template can be either specify as string (using the template property) or as a partial (templateUrl).
If you move a template to a partial you can specify it like follows:
var dialogOpts = {
backdrop: true,
keyboard: true,
backdropFade: true,
backdropClick: true,
templateUrl: 'login-dialog.html',
controller: 'DialogCtrl',
resolve: { dialogScope : {
errors : ['error1', 'error2'],
title :'Add User',
btnTxt : 'Create User'
}}
};
Also, IMO it is easier to pass data to be exposed on the dialog's scope using the resolve property instead of using dialog's instance.
I've converted your fiddle to a plunk to show this: http://plnkr.co/edit/iGIwPBj9zBPgX3IUwBNj?p=preview
You might find $dialog's service additional documentation helpful in further exploaration of this service: https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md
As the last remark, I've noticed that you are were passing the $event argument to event handlers (all calling preventDefault() on them) while this is unnecessary.
Related
I have the following code in my html:
<li class="col-md-4 my-show-hide-animation" ng-hide="sr.hidden" ng-repeat="sr in gmCtrl.gmSRs" ...
The above html page has a button that makes a modal call.
I have another html/js page that can be accessed modally and non-modally.
I have this after coming back from the modal call:
if (!$rootScope.$$listenerCount['sr.CreateDone']) {
$rootScope.$on('sr.CreateDone', function(event, data) {
ctrl.gmSRs.push(data.sr);
$uibModalStack.dismissAll();
});
}
Now... this actually works over and over again. However, the moment I go into the target html/js in a non-modal way (which also works), the modal way no longer works. In the debugger, I can see the data.sr object being added to the array, and I can see the array being changed, but it's not reflected in the view. Any ideas??? I assume that either I have some sort of scoping issue or its some weird angularjs bug.
Here's the call:
ctrl.modalInstance = $uibModal.open({templateUrl: "standardresponse/standardresponse.html",
controller: "StandardresponseController",
controllerAs: "standardresponseCtrl",
size: "lg",
keyboard: true,
backdrop: 'static',
windowClass: "app-modal-window",
});
I also added a line of code that shows I only have the 1 listener running.
If the array is changing, but it isn't showing up in the view, this means that the digest cycle isn't properly running on the $scope. You could fix this manually by calling $scope.apply() but you might want to reconsider your design.
I'm using angular and ui-router with the extras so that I can use sticky state for maintaining listview scroll position on returning from the detail page in my mobile spa app.
My list is a kendo mobile listview. I'm implementing crud and would like to reflect the changes made in the listview when returning. I do not use the $state.go in my back buttons, but use $window.history.back because I want the back buttons to work "as expected", so I cannot use the reload parameter of that function.
I wired up the onReactivate and inject the service that has the flag to tell it whether crud operations have been done and to reload the list. This all works and I can successfully determine if I need to reload the screen.
So, I try to use the kendo.mobile.ui.ListView refresh method. I use angular.element("#idoflistview").data("kendoMobileListView").refresh(). It does find it and does refresh it, but all of the items are set to have a style="transform: translate3d(0px, 0px, 0px);", so they are all overlapping each other.
I originally did try to just do a $state.reload() and rebuild the page, and it did work in that it calls my init function in the controller and I could use the flag to know to request the data right way, but the listview would not build. The request for data was sent and retrieved, but the listview was empty.
I would prefer to just refresh the list if possible because the service has the kendo datasource with the updated data already, so there really is no need to make a call to the database again.
So, my setup for the listview works fine normally, but only breaks if I refresh in the onReactivate in that they are all there, but overlap each other because every li in the list starts at 0 (the update is in there though, so it did refresh).
I'm assuming that it is due to the fact that it needs to do it later. If so, how can I do that?
Any ideas on how to get the refresh method to work properly? Or is there a better way to do this?
Here is the abstract view:
<div ui-view="activityinquirylist" ng-show="$state.includes('activityinquiry.list')"></div>
<div ui-view="activityinquirydetails" ng-show="$state.includes('activityinquiry.details')"></div>
<div ui-view="activityinquirycrud" ng-show="$state.includes('activityinquiry.crud')"></div>
Here is how I'm declaring my listview:
<div id="activityListScroller" kendo-mobile-scroller="activityListScroller" k-pull-to-refresh="true" k-pull="vm.pullToRefresh" k-pull-offset="200" class="scroller-header-footer">
<ul id="activityListView" kendo-mobile-list-view="activityListView" k-data-source="vm.activityInquiryService.activityInqiuryDataSource" k-template="vm.activityTemplate" k-on-click="vm.listClicked(kendoEvent)" k-auto-bind="false" k-load-more="true"></ul>
</div>
Here is the code for the state:
.state('activityinquiry', {
//sticky: true,
abstract: true,
url: '/activityinquiry',
templateUrl: 'app/views/cm/activityinquiry.html'
})
.state('activityinquiry.list', {
url: '/activityinquirylist',
views: {
'activityinquirylist#activityinquiry': angularAMD.route({
templateUrl: 'app/views/cm/activityinquirylist.html',
controller: 'activityinquirylistController',
controllerUrl: 'controllers/cm/activityinquirylistController',
controllerAs: "vm"
})
},
sticky: true,
deepStateRedirect: false,
onReactivate: function (activityInquiryService) {
console.log("reactivating");
if (activityInquiryService.model.reloadList && activityInquiryService.model.reloadList == true) {
activityInquiryService.model.reloadList = false;
var item = angular.element("#activityListView").data("kendoMobileListView");
if (item) {
item.refresh();
}
}
}
})
EDIT:
After further investigation, I have found that it is due to the kendo.mobile.scroller. It is not available at the time that I am refreshing the listview, so it is somehow messing up how the listview does it's drawing. This makes no sense to me because the listview is inside the scroller (and still is if I inspect after).
If I remove the scroller, it works as expected, but I need that scroller because I am not using kendo views and have a footer on the page, so it will scroll with the content and I am using the pull to refresh functionality of the scroller (don't want to use the listviews pull to refresh because it does not allow me to handle how the refresh happens, while the scroller does).
Another Edit:
I have tracked it down to the fact that it only happens when I have loadMore true on the listview. If I turn this off, then it works fine.
So, in the code example above, if I set k-load-more="false" it works. I tried it with endless-scroll too and both have the same effect.
I am facing problem to update my model values from custom directive using controller as syntax. I can clearly see that through console.log that the values are getting changed in the directive however they are not getting updated in the controller. <h4>{{self.tabs}} </h4> always shows same values.
In addition I want to do watch on controller (self --> tabs) model to add 'active class' but when I try to use watch it is throwing me out error. So I have commented that part. The following is the watch related code, which is not working:
$scope.$watch('tabsCtrlself.tabs.index', function() {
if (tabsCtrlself.tabs.index === index) {
angular.element($element).addClass('active');
}
});
Please find my plunker, Can any one direct me to fix this?
you can use 'ng-class' attribute,eg:
<en-tab data-pane="myPaneName1" ng-class="{active:index==1}">Tab #1</en-tab>
<en-tab data-pane="myPaneName2" ng-class="{active:index==2}" >Tab #2</en-tab>
<en-tab data-pane="myPaneName3" ng-class="{active:index==3}">Tab #3</en-tab>
'index' is a object in angular: $scope.index, initializes its value:
$scope.index=1;
The first item is selected by default.
I think the object of 'tabsCtrl.tabs.index' is not a angular object, so can't auto refresh
I am using angular js for my page. when I run it on my localhost it needs to go for remote server to get some data. I am getting data from '$http.get' which actually somewhat delayed(3-4 secs) so, mean-while the html page looks ugly. I need to prevent to show the page until the response data returned.
How can I achieve this ?
Any suggestion would be highly appreciated.
You can add a variable to your scope that's 'false' by default. When your '$http.get' call is done, set the variable to 'true'.
Use 'ng-show="variable"' on whatever you want to hide. It will show whenever that variable is set to 'true'. E.g. when the '$http.get' call is completed.
UPDATE:
If you want to make it more fancy, you can use classes instead of true / false for your variable and use 'ng-class="variable"' to style your page. This way, you can use a class, let's say 'hidden' to hide the page. And then change it to 'shown' when the '$http.get' call is completed. This way, you can use CSS3 transitions.
I believe there are other options as well, but this could be a simple solution. For the best solution, you should provide more info. (how is the call made, when is the call made, ...)
you have two ways to solve it
ng-cloak: You have to add it like this:
<body ng-cloak="">
also you would need this class somewhere in your main css file.
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
and this will prevent unwanted flashing.
Link to docs.
OR 2. you can use ng-route resolve
you should return a promise from your route, and route change only after the promise is reoslved.
.when('/article/:id', {
templateUrl: 'app/article/article.html',
controller: 'ArticleController',
resolve: {
article: ['$http', '$route', function ($http, $route) {
return $http.get({ contentId: $route.current.params.id }).$promise;
}]
}
})
First, let me show the piece of pseudo-code to illustrate functionality I am trying to achieve
<a data-ng-href="{{getPath('InsuredProfileSummary',{insuredId:insured.insuredId})}}">Summary</a>
Basically, I have a routes defined so that I can refer to them by name, for example
{
name:'InsuredProfileSummary',
url: '/insureds/:insuredId/profile/summary',
config: {
templateUrl: 'app/insured/profile/summary/inProfileSummary.html',
reloadOnSearch: false,
settings:{}
}
}
and I have a service that, given the route, builds the url. So in my example it would replace insuredId with the value, and one would get correct url to the insured profile. This works fine in controller, such as this code
$scope.closeEditModal(vm.insured);
var summaryPath = routesSvc.getPath("InsuredProfileSummary", { insuredId: vm.insured.insuredId });
$location.path(summaryPath);
My question is how would one achieve this binding in html template. Is there a native way to bind result of a function to a value of the attribute, or do I have to write my own directive?
Ok, I had an error, I was missing a "#" in the path, that is why the code did not work.
don't see an issue here.
http://jsfiddle.net/STEVER/2YkeH/
$scope.genUrl = function(){
return 'http://js4.it'
}
Probably I didn't get the idea of the question.
If you want to update it asynchronously it's better to bind a model -
http://jsfiddle.net/STEVER/2YkeH/6/