My Plunker: http://plnkr.co/edit/xrzhG9NqYfv2Mbskbh1D?p=preview
In a nut shell, I have the code listed below in my index.html
<div data-ng-controller="addCtrl" data-ng-include="'app/views/add.html'" />
<div data-ng-controller="editCtrl" data-ng-include="'app/views/edit.html'" />
I have two buttons, one that shows the add.html, the other edit.html via $broadcast
With the current order, add works, but edit doesn't. If I flip the order, eg:
<div data-ng-controller="editCtrl" data-ng-include="'app/views/edit.html'" />
<div data-ng-controller="addCtrl" data-ng-include="'app/views/add.html'" />
Then edit works, but add doesn't.
This might have to do with why my previous question was screwing up, but not sure: "Element is not currently visible and so may not be interacted with" but another is?
It seems that angular can not part <div /> notation.
Expanding to <div ...></div> works.
Related
I have the following angular-List (reduced the content to make it better readable):
<div ng-repeat="element in bigBlock.Elements track by $index"
class="singleBlockElement"
ng-drop="dragSource=='Block'"
ng-drop-success="To($index, $data, bigBlock)">
<div class="bbRange"> </div>
<i class="fa {{GetImage(element)}}" />
<div ng-drag="element.ElementType!=='placeholder'"
ng-drag-data="element"
ng-drag-start="Start()"
ng-drag-success="From(element,bigBlock, $index, bigBlock.$index)"
ng-drag-stop="Stop(element, bigBlock, $index, bigBlock.$index)"
class="cutOff">
{{element.Title}}
</div>
<div class="edit ng-show="GetLinkText(element, true)">
<span class="isvisible">
<i title="{{element.Present?'Präsentieren':'Nicht präsentieren'}}" class="fa fa-{{element.Present?'eye':'eye-slash'}}"></i>
</span>
{{GetLinkText(element,true)}}
</div>
</div>
This is how it looks like:
This is while dragging:
And this is how it looks like when I simply don't drop like described below:
I can now (successfully) drag & drop the two elements ("Welcome" and "Go Away") inside that block changing the order of these two.
But if I abort the drag/drop. e.g. Dragging "Welcome" and not moving it downwards or moving it to an area where I cannot drop (outside the block) the text "Welcome" disappears.
There are no errors. The drop is just not happing (as expected), but Angular seems to be unable to redisplay the text of that element. ({{element.Title}})
I event tried forcing a refresh using $apply(), but this did not change a thing (not creating an error either).
However, if I do ANYTHING on the page like clicking on an edit-button or anything else that causes an event, the date is correctly shown again.
So it looks like a refresh issue for me.
I am using ngDraggable for this (https://github.com/fatlinesofcode/ngDraggable)
(Update: Analyzing the page source in Developer Console of Chrome the text still seems to be there and even "should" be visible (display:block), so this might be more of a browser-issue (chrome) than an angular-issue)
This seems to be a pure Browser/CSS-Issue and not an Angular-Issue. I solved this by forcing the browser to refresh the parent container:
$('.mm-Right')[0].style.display = 'none';
$('.mm-Right')[0].offsetHeight;
$('.mm-Right')[0].style.display = 'block';
where my structure is
<div class='mm-Right'>
<div class='singleBlockElement>[..]</div>
<div class='singleBlockElement>[..]</div>
<div class='singleBlockElement>[..]</div>
</div>
That did solve the problem but looks like cheating for me. I would prefer that this bug not even appears instead of hiding the symptoms. So I am happy to accept any better answer for that problem.
I'm trying to set the active pane of a pair of tabs programmatically as part of interface. When I set it with a number, which appears to be the correct way looking at the docs, I get the following error.
Error: s.assign is not a function
.link/<#http://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.6/angular-strap.min.js:9:13383
There's only one .assign call in the uncompressed version of that file, which is on line 3280. Looking at that line, unless $parse is doing some seriously clever stuff, it would appear that I'm trying to call .assign on a number, which I assume is the wrong thing.
What am I doing wrong? Is there a quick way to fix it (assuming it's a semi-complex problem)?
Sample HTML
<div class="full-height" data-fade="1" data-bs-tabs="" data-bs-active-pane="{{ controller.getActiveTab() }}">
<div data-title="Tab 1" data-bs-pane="">
<!-- Injected content of tab 1 -->
</div>
<div class="full-height" data-title="Tab 2" data-bs-pane="">
<!-- Injected content of tab 2 -->
</div>
</div>
I don't think you can use a function or a fixed value with the attribute helper as the directive will try to update the value whenever the user change tab.
If you replace your function with a variable, your code will work.
HTML
<div class="full-height" data-fade="1" data-bs-tabs="" data-bs-active-pane="activePanel">
<div data-title="Tab 1" data-bs-pane="">
<!-- Injected content of tab 1 -->
</div>
<div class="full-height" data-title="Tab 2" data-bs-pane="">
<!-- Injected content of tab 2 -->
</div>
</div>
JS
$scope.activePanel = 1; // This is the initial active panel.
DEMO
I'm new to masonry with angular. i have tried to get masonry working with angular up to a certain extend and im facing few issues with it right now. Below given link is what i have done so far and the following are the two issues facing:
<div ng-controller="MainCtrl">
<div class="grid" masonry="true" column-width="460">
<div ng-repeat="item in items" class="item {{item.class}}">
<div><h1>{{item.name}}</h1></div>
<br /> <span>Age: {{item.age}}</span>
<br /> <span>Company: {{item.company}}</span>
</div>
</div>
</div>
Link to jsfiddle for my solution
instance 1
When there is enough space the smaller brick does not get adjusted. E.g. After "Collin Alston" i need to have "Jasmine Rollins" and likewise. How would i accomadate this change? (see for image below as well)
instance 2
Why is it that "style" attribute gets applied to child elements? i need the style to be applied to "item w1 masonry-brick" and not child div's.
I had in instance 1 and changed it to for instance 2 to show the two problems im facing. Hope to get some answers to work my way out. Thank you in advance.
Update 1:
I managed to get masonry working with angular to this extend. Check this out http://jsfiddle.net/h5jfd1wm/38/
But still there are some empty spaces when i resize the window. It's like some bricks from the bottom can fill up those empty spaces. If you can help me out here.
Would like to know the best way to preserve state between tabs. I use bootstrap tabs and angular ui-router. I've a google map in one of the tabs and don't want to reload the map when user selects that tab. Please advise.
Thanks
I think what you are looking for is discussed in this issue: https://github.com/angular-ui/ui-router/issues/63
They are mostly discussing iframes but I believe the same should hold for Google Maps. Unfortunately in the thread they decided that this isn't something that should be implemented in the core release. I haven't tried out the directive they provide (if I get a chance I'll let you know how it goes) but you may be able to get something working with that.
I have actually come across the exact problem you had. My solution was to use styled buttons as my tabs and ng-show for the map tab:
<div id="info-btns">
<button class="btn" ng-model="view" btn-radio="'info'">
Info
</button>
<button class="btn" ng-model="view" btn-radio="'map'" ng-click="loadMap()">
Map
</button>
</div>
<div class="content" ng-show="view != map">
<div ui-view="info"></div>
</div>
<div id="map-container" ng-show="view == 'map'">
<div id="map" class="content" sitemap>
</div>
</div>
ng-show simply uses display:none to hide the map and hence doesn't cause a refresh. You will need to trigger the map to load the first time it is not hidden otherwise it will render incorrectly, hence loadMap()
If I get a chance I'll set up a jsfiddle of this in practice.
I'm building a reasonably non-trivial Angular-js application for the first time and am trying to establish some intuition about how to get things done. Most things are making sense, but there's one pattern in particular that has me stumped -
Whenever I place an "include" style directive inside an ng-switch, it is ignored. I've experimented with just about every style of ng-switch, ng-include, and ng-transclude I can think of to achieve the desired behaviour, but to no avail. I haven't noticed any documentation indicating that this would be disallowed, nor any equivalent style of pattern.
Here is an example of what I have tried to do:
<div ng-switch="is_logged_in()">
<div ng-switch-when="true">
logged-in:
<div ng-include="'views/logout.html'"> </div>
</div>
<div ng-switch-default>
not-logged-in
</div>
</div>
The expected behaviour being that the logout form is displayed when $scope.is_logged_in() returns true.
The behaviour I see is that "logged-in:" is displayed, but the include isn't.
I've tried various versions of Angular-js. I've inspected the network traffic and seen that the include is in-fact being fetched, but I can't get this to work. I've had the same behaviour manifest when trying to build my own template control structures using directives.
The way I've seen most examples dodge this is by using JS in a directive to manually show/hide various sections of the transcluded content - is this really the idiomatic way to get the behaviour I'm looking for?
Thanks!
While using ng-include I always assign the path to a variable in controller.
$scope.logoutlink ='views/logout.html'
And in the view you can assign as
<div ng-include="{{logoutlink}}"> </div>
It would be helpful to post a JSfiddle link.