Basically, what my client asked me to do is similar to tag friends in Facebook/youtube comment.
must start with #
a popup suggesting a list, upon selected, the value is appended back to the original contenteditable
I have tried
https://angular-ui.github.io/bootstrap/
and ngTagsInput , they are close but not enough... thanks
I bet this is what you are looking for http://angular-ui.github.io/ui-mention/example/ . I have to admit it took me quite a few days to find it (via google)
Good luck
You're building autocomplete for tags. If you plan to reuse it, then you'll need to write a custom directive. If not, then you can do a messy implementation inside of your controller.
You'll need the html element you are editing to look like this:
<div ng-model="newtag" ng-change="tagchanged()" ng-bind="newtag"></div>
ng-change will fire on change, so your function will need to have a debounce (wait a period of time) in order to wait until the user finishes typing. You can accomplish this with a setTimeout of 500ms. If it changes during that time period, kill the timeout. But if it doesnt, do your api call to get the list of potential tags and show them in a list below the field. You'll want the css for the results to let them align to the search field and hover above the rest of your page.
Related
I am trying to click a button that is buried in div classes in the code via protractor.
I am pioneering a protractor project for my work and have reached a point where I no longer know what to do. I have a button that is buried in div classes and is not allowing me to click. I have tried using mouseMove to get over to the coordinates of the button, I have tried using the className of the specific button, etc. The button does not have an id. The id is not the issue as I have tried clicking a different button, equally buried in divs, by it's id. I need to know how to get through the layers of divs in order to click the button because the rest of the tests will be dependent on it.
APPLICATION CODE:
::before
<dashboard-label>
<div class="att-topic-analysis-tabs">
<div class="att-button-group">
<button class="btn btn-default btn-lg att-close-topic ng-scope"
role="presentation" tabindex="-1"
ng-click="removeTopic(currentTopic.id)" translate>
Close Topic
</button>
</div>
</div>
PROTRACTOR TEST:
it('Closes Topic Successfully', function(){
//opens the first available topic
openTopic.click();
//checks that the URL contains 'topics' after 5 seconds
browser.wait(proExpect.urlContains('topics'), 5000);
var closeTopic = element(by.className('att-close-topic'));
//browser.wait(proExpect.elementToBeClickable(closeTopicButton), 5000);
console.log(closeTopic);
closeTopic.click();
browser.wait(proExpect.urlContains('home'), 5000);
});
As you can see, the Close Topic button is kind of buried in div classes and the standard click isn't working. Any info would be greatly appreciated
If the closeTopic locator is finding the element, but failing to click it, check to make sure there's only one matching element in the DOM, and that it's visible. My favorite way to check the DOM is just ctrl-F in Chrome inspector and paste the exact CSS that the test is using (.att-close-topic). And to check that what it's getting is visible, use
console.log(closeTopic.isDisplayed());
This can be a big gotcha in protractor, because it doesn't fail (only warns) when there are multiple matches on the page, and it defaults to the first match rather than the first visible match, which drives me nuts, because it's very rare that you want to do anything with a non-visible element on the page.
This will be partly opinion, but just to add a layer to the conversation...
Sometimes the solution to locating a troublesome element on the page is to go back to the developers and make the page more testable. I've seen testers spend hours or days crafting brilliant workarounds to access a stubborn element, and the end result was a fragile, complicated end-to-end test (and aren't they fragile enough already?).
Sometimes a 5-minute conversation with a developer can result in a quick change in the production code (e.g. add a unique ID) that avoids all that effort and yields a much better result, more stable, more simple. But this requires open conversation between the dev and test team, and a culture that values testing as a primary activity enough to make those testability changes to production code that is otherwise working just fine.
This is what you want to read to help you debug why your test doesn't work.
Also, you might want to start adopting await/async since the control flow will go away in the future.
http://www.protractortest.org/#/debugging
try this
var closebutton=element(by.css("[ng-click="removeTopic(currentTopic.id)"]"),
EC = protractor.ExpectedConditions;
Waits for the element to be clickable.checks for display and enable state of button
browser.wait(EC.elementToBeClickable(closebutton), 10000);
now use : closebutton.click();
My HTML code for a NEXT button which I am trying to click is:
<input type="submit" name="ctl00$ctl00$MainContent$ChildContent1$btnStep2_Submit" value="Next" onclick="waitBtn(event,'df_step2');
OverlayProgressPanel_NoSub('ctl00_ctl00_MainContent_ChildContent1_fsLoanData','ctl00_ctl00_upProgress');
" id="ctl00_ctl00_MainContent_ChildContent1_btnStep2_Submit" class="btn" onmouseover="hov(this,'btn btnhov');" onmouseout="hov(this,'btn')" />
Am using the below code to click that next button:
xpath = ".//*[#id='ctl00_ctl00_MainContent_ChildContent1_btnStep2_Submit' and #type='submit']"; // Next Button
Function_Classes.field_click(driver,xpath); // Click on Next button
driver.manage().timeouts().implicitlyWait(20,TimeUnit.SECONDS);
But,it looks like the button is getting clicked but not going to the next page where there is one more NEXT button
I am getting below exception :
Unable to locate element: {"method":"xpath","selector":".//*[#id='ctl00_ctl00_MainContent_ChildContent1_btnStep3_Submit' and #type='submit']"}
ctl00_ctl00_MainContent_ChildContent1_btnStep3_Submit = this is the button on the next page and since I am not getting the next page on clicking the first NEXT button ,I would think that might be the reason..
Can you please help me here?
IDs by HTML standards should be unique on the page so you shouldn't need to specify anything other than the ID in the locator. That will simplify your locators. So, in this case you can use By.id().
You've added an implicit wait in the middle of your script. That leads me to believe that you don't understand how implicit waits work. An implicit wait is set once for the driver instance and lasts the life of the driver. Generally you would put this statement near the top of your script. I would advise against using implicit waits and instead prefer explicit waits (WebDriverWait). I've rewritten the code. I think the below should work.
By next2Locator = By.id("ctl00_ctl00_MainContent_ChildContent1_btnStep2_Submit");
By next3Locator = By.id("ctl00_ctl00_MainContent_ChildContent1_btnStep3_Submit");
driver.findElement(next2Locator).click();
new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(next3Locator)).click();
Suggestion: Don't overcomplicate your code by adding wrapper functions around .click(), etc. There's really no need for it. It makes your code harder to read and introduces unnecessary complexity. Keep it as simple as you can.
There is a problem inside your html, Because Threre are few functions are available inside your html, and you didn't call all functions properly. so your button click event was not fire. functions name like this waitBtn, hov.
See image for more details.
I have a
<div ng-repeat="post in getServerPosts()" >
where i ng-bind post.title and post.excerpt. Posts also have unique a post.id but it is not shown (which is what I want since I don't bind it).
I am trying to find a way to allow the user to mark a post by somehow utilizing the post.id. That way, if a user marks a post it will automatically be marked next time the ng-repeat runs (every time the page loads).
I have played around with scopes in the controller but I can't figure out how to handle the post.id this way.
Question is probably beyond newbie level and maybe there are smarter ways to do this. Any hint or advice?
So, I have made some custom directive which draws kind of a data-grid, based on floated divs (because nested flex implementation in FF sucks - but it's not the point).
How it works :
I pass some data collection to the directive via something like <the-grid data-list="parentController.displayedRows">
Inside this first directive, I have columns via something like <a-grid-column data-value="row.value"></a-grid-column> with many attributes I won't precise here.
The data-value value can be a direct expression, bound to the row on which the the-grid directive controller is ng-repeating in order to display each columns, or a function which have to be $eval-uated in order to display the intended value from the parentController.
In my <the-grid> directive controller, I have the rendering template of my grid which make a nested ng-repeat div (first one on the rows of the data-collection, second one on the columns, created in the directive), it looks like :
<div data-ng-repeat="row in list">
<div data-ng-repeat="cell in theGridColumns"
data-ng-bind-html="renderCell(row, cell)">
</div>
</div>
I have some keyboard nav in order to quickly select a row or navigate within pagination or many tabs, which does nothing more than applying some class on the selected row, in addition to update some "selectedRowIndex".
I'm using angular-vs-repeat in order to have the minimum of row divs in my DOM (because the app is running on slow computers). This works well.
The problem is that every time I'm hitting some "up" or "down" key on my keyboard, Angular is "redrawing" EVERY cells of the list.
So, let's suppose I've 200 rows in my data list, and 7 columns for each rows. First load of the page, it passes ~3000 times in the renderCell() function. Ok , let's accept that (don't really understand why, but ok).
I hit the down key in order to go to the second line of my list. It passes ~1100 times in the renderCell() function.
So yes, the result is very slow (imagine if I let the down arrow key pressed in order to quick navigate within my rows)... I can't accept that. If someone could explain that to me... Any help would be greatly accepted :)
If I make the same thing without a directive (direct DOM manipulation, with columns made by hand and not in a ng-repeat within a ng-repeat), every thing is smooth and clean.
Yes, I've look into every angular grid on the market. No one is satisfying me for my purpose, that's why I've decided to create my own one.
And no, I really can't give you some JSFiddle or anything for the moment. The whole app is really tentacular, isolating this is some kind of complicated).
Try to use bind once (angular 1.3+)
<div data-ng-repeat="row in ::list">
<div data-ng-repeat="cell in ::theGridColumns"
data-ng-bind-html="::(renderCell(row, cell))">
</div>
</div>
<div ng-show="!activities.length">No items in feed</div>
I use the above code to show a message when a user has no items in their feed. On that same page I have a radio button to show different types of feeds (e.g. just yours, or all your friends, etc.). When the user selects a different option, it makes a post back to my API which takes a second, but while the api is grabbing the data the empty list message displays for a second.
Is there an easy way to resolve this?
Use the ngCloack directive for this:
http://docs.angularjs.org/api/ng.directive:ngCloak
The other option is to use ng-bind as many people recommend it over ng-cloak:
http://docs.angularjs.org/api/ng.directive:ngBind
I personally have had issues where even using ng-cloak there is a slight markup flash.