I'm using ngDialog js plugin, to open a view in a modal existing in another view :
I'm in "items" page(view) when I click new group, a popup appears where I can find the "items groups" view to add edit or delete a group.
Plugin is working fine, when I click new group, the popup modal appears but it doesn't return the groups view, it returns undefined.
My laravel project files
app
bootstrap
resources
storage..
I'm calling the template inside : resources/views/GroupsInv
code :
$scope.openNewAddItemForm = function () {
ngDialog.open({template: 'GroupsInv/GroupsInvView', className: 'ngDialog- theme-default', plain: true, scope:$scope});
Problem : popup opens and shows "undefined". I don't know if the problem is the path.
Route working fine :
Route::get('/GroupsInvView', function () {
return view ('GroupsInv/GroupsInvView');
Related
I'm working on Project MVC, Angular js
I have a problem that I show modal and in initiate fun i load a number of questions on the basis of user choose his subject and then opening the pop up modal with questions
But I do not know the modal open but without any questionds
at first i Load skill page and from this page user select his subject and then popup modal opened
after search i think the problem because of modal loaded when skill page load so after open modal no questions appeared
how can i reload modal or solve this problem
Hint : when pass function in init with values it worked and questions appeares but when pas values values passes aright and beduge is correct but popup open as empity
For example
ng-init =" ReadQuizQuestions (11, true)"
working good but when
ReadQuizQuestions (secItem.Id, secItem.hasQuiz) not working
can any one help me to solve this problem
in skill page
<div class="badge_unit heading_font video_course_preview" ng-
click="ReadQuizQuestions(secItem.Id,secItem.hasQuiz)"></div>
in angular js file
$scope.ReadQuizQuestions = function (id,hasQuiz) {
if (hasQuiz == true) {
ShowPleaseWait();
QuizService.ReadQuiz(QuizId).success(function (res) {
.
.
.
.......
$('#QuizModal').modal('show');
});
HidePleaseWait();
}
}
Thanks in advance
In this exemple i passed parameters from my controller to the modal (list of questions)
To pass the parameter you need to use resolve and inject the items in controller of modal.
$modal.open({
emplateUrl: 'myModal.html',
controller: 'ModalDialogController',
resolve: {
questionsList: function () {
return $scope.questionsList;
}
}
})
.result.then(function(result) {
alert(result);
});
After selecting your question and validate i reyrn the selected value to my controller with
$scope.ok = function () {
$modalInstance.close($scope.modal.selectedName);
};
This is a full exemple
I am new to AngularJS. I have been developing a site that displays a list. Each element in the list is a delivered from the server as a string. Within each element I use bars as delimeters for keywords that I'd like the user to be able to click on (i.e. this is a |keyword| in this element).
I use a controller/filter to create html to remove the delimiters and make the keywords red (using a class). So the html looks ends up looking like this:
<span ng-controller="formatForGlossaryAndCodeTextCtrl" class="ng-scope">
<span ng-bind-html="formattedLineItem" class="ng-binding">
this is a
<span class="glossaryLookup" >keyword</span> <!--here is my keyword-->
in this element
</span>
</span>
I tried having the filter also generate ng-controller=xxx and ng-click=xxx in order to stay in the angular world but that doesn't work (my keyword is not clickable when I do that).
I DO have jQuery code that binds the click event to the elements with class=glossaryLookup. It currently displays an alert when I click on the keyword.
I am at a loss as to how to get that click to display an angular modal dialog. I want it to use an angular modal dialog because there is another part of the same application that already displays an angular modal dialog and I want to be consistent
So, in short... the server delivers a string containing one or more delimited words to the browser. I'd like the angular/js/jquery code on the browser to not only highlight the delimited word(s) but allow me to click on them, look up a definition (I am not concerned about how to look up the definition, at least not yet) and display that definition in a $uibModal.
Thanks for any help.
I think I actually figured it out. I created a dummydiv and gave it an id (id=dummydiv). I "assign" a controller to that div (ng-controller=dummyCtrl).
`<div id=dummydiv ng-controller=dummyCtrl></div>`
In the jQuery code that binds the click event to my keyword I use this line of code to run the function in the dummy controller that displays the dialog:
`$(document).ready(function () {
$(document)
.on("click", ".glossaryLookup", "NEED TO LOOKUP IN GLOSSARY", function (x) {
angular.element($("#dummydiv")).scope().testclick();
})
.on("click", ".codeTextLookup", "NEED TO LOOKUP CODE TEXT", function (x) {
alert(x.data)
})
});`
BTW - the dummy controller looks like this:
`//DUMMY CONTROLLER TO TEST DYNAMIC CLICK
Hydroware_Checkbox_List_Prototype_App.controller('dummyCtrl', function ($scope, $uibModal) {
$scope.testclick = function () {
alert("I WAS CLICKED BUDDY");
var modalInstance = $uibModal.open({
templateUrl: 'line_item_help.html',
controller: "LineItemHelpDialogCtrl",
scope: $scope
});
};
});`
I created an angularJS Controller with 1 method.
Controller.js
var project = angular.module('project',[]);
project.controller('TestCtrl', function($scope){
$scope.run = function(){
alert('Test');
};
});
I created a placeholder in a textbox in SSRS RDLC. I changed the placeholder properties. From General pane, I selected HTML-Interpret HTML tags as styles under Markup type section. Then, under Value, I entered this: ="< a onclick='run()'> Run Report < /a>"
However, it did not work. Is it possible to call an javascript method that was implemented in an AngularJs controller in SSRS RDLC??
user ng-click instead of onclick
I'm trying to design a single page pagination app that displays the different pages of a document beneath each other in the same window. It has to meet the following requirements:
A pagination toolbar where the user can click next/previous/... and submit a page to go to.
The window scrolls to the right page of the document after a page has been submitted
If the user scrolls manually, the current page should update automatically
I tried some different stuff but was never really satisfied with the result. This is how I see the solution:
The app consists of 1 factory:
DocumentFactory: Stores the current page of the document and has the following methods:
setPage(page): sets the page in a factory so different controllers/directives can use this page
broadcast(pageChanged): broadcasts an event after the page has changed so the controllers/directives can listen to this even and react approprialty
2 controllers:
PaginationCtrl[DocumentFactory]: The pagination toolbar controller, updates the page by calling the setPage(method) of the DocumentFactory and listens to the pageChange event to update it's own scope when the page changes in an other controller/directive
DocumentCtrl: The controller of the document
1 Directive:
Page[DocumentFactory]: Resembles a page in the document and has the following methods/listeners
scrollToPage(): If the currentPage equals this pages number (added to the directive as an attribute, scroll to this page)
If this page is visible and the highest in the window of all visible pages, change the current page to this page's number by calling the DocumentFactory setPage(page) method.
Is this the right approach to store the page in a service and use events for the other controllers/directives to listen to it?
Should I create a controller in the directive to listen to the event or add a $watch in the link function to watch for changes in the current page (inherited from the parent Ctrl scope)?
Should I let each directive check if it's page number equals the current page on page change or should I let the DocumentCtrl scroll to the right element?
AS you already have the methods in the controller calling the factory, what you need is to use the '&' isolate scope in the directive to call the method you want.
Create the methods in the controller
var app = angular.module('app', []);
app.controller("Ctrl", function ($scope) {
$scope.goForward = function (){
alert("call to the paginator page up service");
};
$scope.goBack = function (){
alert("call to the paginator page down service");
};
});
Then set up the '&' scope isolates in the directive:
app.directive('paginator', function (){
return{
restrict: 'E',
scope:{
forward: '&',
back: '&'
},
template: '<button ng-click="forward()">Page up</button>' +
'<button ng-click="back()">Page down</button>'
}
});
Finally add the directive to the page with your attributes as defined in the directive:
<paginator forward="goForward()" back="goBack()"></paginator>
Here's the code in Plnkr.
HTH
I'm using brunch to work with backbone and I'm having issues with event.preventdefault(). It works initially, but after a page change it stops working.
I have a view that passes a param to the template and according to that the page is rendered. This page has multiple forms, and loads up one according to the param. All the forms have preventdefault bound to the submit buttons, but for some reason, after I switch forms using one of the nav links, the preventdefault stops working and the form gets posted. Any idea why this is the case? Let me know if you need to see code.
An example of how this happens:
I click 'submit story' nav link and type something and hit submit. I get the js alert and nothing happens. Now I click 'submit poem' and click submit, but this time the form gets posted. If I started off with 'submit poem' it works fine. It also works if I click 'submit poem' and hit refresh before submitting. Weird....
EDIT: Added Code Sample. Template renders acording to the passed in type.
class exports.ClientsSettingsView extends UberView
id: 'settings_view'
className: 'view_container'
events:
'submit #credit_card_form' : 'addCard'
'submit #profile_pic_form' : 'processPicUpload'
'submit #edit_info_form' : 'test'
'click #delete_card' : 'deleteCard'
render: (type="info",status=0) ->
$('.spinner#submit').hide()
#ReadUserInfo()
$(#el).html clientsSettingsTemplate {type,status}
#FadeIn()
#
addCard: (e) ->
e.preventDefault()
$el = $(e.currentTarget)
attrs =
card_number: $el.find('#card_number').val()
card_code: $el.find('#card_code').val()
card_expiration_month: $el.find('#card_expiration_month').val()
card_expiration_year: $el.find('#card_expiration_year').val()
options =
success: (response) ->
alert "Added"
error: (e) ->
alert "Error"
model = new app.models.paymentprofile
model.save attrs, options
console.log attrs
How are you loading the additional forms and submit buttons later on? if you are dynamically pulling them in, your event may no longer be attached. You could try binding your event to the form submit using jquery's live method.
.live()
I had the same problem.
A workaround
is to manually call delegateEvents() after the Backbone.View is added to the DOM.
The issue
I was calling subview.remove() which removes all DOM event listeners (via jQuery.remove) and used that same subview instance later on.
A solution
If a View has to remain active but must be temporary hidden use this.$el.hide() & this.$el.show()
In other situations don't reuse Backbone.View instances, but instantiate new ones.