I am using a slider module called slick. I have a tab heading which tracks and displays the index of the slide so the user can see. Issue is that the tab heading slides with each slide as that tab is inside the carousel (obviously).
I moved the tab heading out of the slide, and planned to display to use ng-model and ng-value to bind the data to an element outside of the slide. Like so:
<div>
<p>Blue Renewal {{vm.slide.number}} of {{$ctrl.blueRenewals.length}}</p>
</div>
<slick data="$ctrl.phaseArr" >
<div ng-repeat="item in $ctrl.phaseArr">
<div>
<input type="text" ng-model="vm.slide.number" ng-value="{{$index + 1}}">
</div>
</div>
</slick>
And in the .js:
vm.slide = {
number: '1'
}
Question
Why isn't the value from the input binding to the p element outside of the slick carousel?
It's hard to say with so little code to go on, but I suspect you're encountering a scope issue.
There are at least two, probably at least three levels of scope in play here. Your heading is in your controller accessing properties of its scope. So when you bind to vm.slide.number it's looking on your scope. The 'slick' component likely creates a scope of its own, which may be where vm comes from. If that's the case, your view (on the parent of slick's scope) can't see properties on it.
(The ngRepeat also creates child scopes, but I don't think that's the problem.)
Related
I'm new to Nextjs, doing setup for a nextjs react project. I used create-next-app to initialize code base, then realized that there's a weird div tag with the class 'selection_bubble_root' right inside body. Its visibility is set to hidden but it still spares an annoying empty block.
Does anyone know about it? What is it for or how to remove it? Many thanks!!
Not sure what that is for, but there is a thing called bubbling and it is triggered for example when you have a clickable element inside another clickable element.
something like
<div class="item1" onclick="do1()">
<div class="item2" onclick="do2()">
<div class="item3" onclick="do3()">
</div>
</div>
So when you click on item3 it will execute do3() first, but then it will also execute do2() and do1() as long as you dont disable it.
So this is called bubbling, it goes up from child to parent and the bubble root is item1 (in this case).
Opposite effect is called capturing
I have a scenario where when i mouse enter on some text i need to get an input box and text should hide and when i leave the text box the box should hide and i should show the text back
but this is not happening
Html
<div ng-app>
<div ng-controller="showCrtl">
<div ng-hide="showme">
<p ng-mouseenter="showme=!showme">
mouse enter
</p>
</div>
<input type="search" ng-if="showme" ng-mouseleave="showme=false">
</div>
</div>
JS:
function showCrtl($scope){
$scope.showme=false;
}
Here is what i have tried DEMO
Any help is appreciated.
The problem is you had primitive value on ng-if directive, You know ng-if does create child scope whenever it renders that element on DOM. To resolve this issue what I'd suggest you to do is, just follow Dot Rule by defining new object. And then define all the property which you want to use inside that object.
If you want do dig deeper how scope inheritance work, you can refer to this answer.
So in your code, you should define an object suppose i.e. $scope.model = {} and then have showme property inside that object itself. And wherever you use showme on view replace that with model.showme.
Demo Fiddle
More convenient way to resolve such kind of scope inheritance issue is, you could use controllerAs pattern. In that you don't use $scope inside controller, you just place with controller context this. While using controller on view you need to create it alias and when you want to get variable value you can use variable reference.
The issue is that you have multiple nested scopes. The showme that is being set in the input box is different from the showme being set in the p. This happens because Angular implicitly adds a new scope for many built-in directives (ng-if is one of them).
You need to be sure that you are always setting and reading the same showme property. The easiest way to do this is to add the showme property to the controller.
Try this:
<div ng-app>
<div ng-controller="showCrtl">
<div ng-hide="showCrtl.showme">
<p ng-mouseenter="showCrtl.showme=!showCrtl.showme">
mouse enter
</p>
</div>
<input type="search" ng-if="showCrtl.showme" ng-mouseleave="showCrtl.showme=false">
</div>
</div>
In fact, as a general rule of thumb, never access the scope directly in your templates since it is very difficult to be sure you are accessing the scope that you think you are accessing. Always access properties through the controller you are working with.
I have a first div tag on a webpage. It contains some angular scope variables. I want to replace it with a second div tag which also contains some other angular scope variables when something happens.
The first way I tried is to use "ng-show". I add both the first and the second div on html and set the first div tag to be visible and second one to be invisible by using ng-show and ng-hide.
<div ng-show="showFirstDiv">
</div>
<div ng-hide="showFirstDiv">
</div>
When I change $scope.showFirstDiv from true to false within the relevant controller and call $scope.$apply(), the ng-show and ng-hide attribute values change (after using inspecting element in a browser).
However, the visibility of those two html tags did not change. The first div didn't disappear even with ng-show="false" and second div did not show up even with ng-hide="false".
What should I do? Is there a better way to replace a div with another div in angular while both divs contain angular scope variables?
Have you tried ngIf?
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}.
<div ng-if="showFirstDiv">
</div>
<div ng-if="!showFirstDiv">
</div>
We are in the process of upgrading our application to Angular 1.3.0. In doing so, we ran into a few issues, most of which seem to boil down to the behavior of ngTransclude inside of ngRepeat.
We have a directive that repeats a bunch of items, with a container around them, but does not own the children of that container. For instance, here is a simplified example:
<div ng-controller="myController">
There are {{items.length}} items.
<div my-directive items="items">
This item's name is {{item.name}}
</div>
</div>
Internally, the directive contains <li ng-repeat="item in items" ng-transclude></li>, among other things.
Prior to the update, this worked fine. The repeated, transcluded elements are in a scope that inherits from the scope created by ngRepeat. As of the update, the items are in a scope that inherits from the controller, and as far as I can tell, there is no way to access the scope created by ngRepeat.
Here are two JS Bin examples:
Old (1.3.0-beta.1) behavior: http://jsbin.com/kalutu/1/edit
New (1.3.0) behavior: http://jsbin.com/gufunu/1/edit
How can I achieve the old behavior, or some semblance of it, in Angular 1.3.0? If this is the intended behavior of ngTransclude, how can I repeat a bunch of child nodes without knowing what they are?
https://github.com/angular/angular.js/issues/8182
It was decided for 1.3 that ng-trasclude would not pull scope from the directive. There is a work-around on the linked pages,
https://github.com/angular/angular.js/issues/7874
https://github.com/angular/angular.js/issues/7874#issuecomment-47647528
This is the expected behavior.
I have many repeated content elements in a single view. Within each content element, there's an anchor. When a user mouses over this anchor, I want to toggle a class on a sibling element within that particular content element.
Here's a simple example of what I want to do:
<div class="content-element">
<div ng-class="visibleClass">
I should have class 'visible' when the user mouses over the link within content-element div.
</div>
<a ng-mouseover="" ng-mouseleave="" href="#">Mouseover</a>
</div>
I initially wrote a controller to handle this, but the controller's $scope is tied to the entire view, not a single content-element, so this turned out to not be a graceful solution.
There are many 'content-elements' that are not generated with angular, but are just repeated in the template.
I'm fairly new to angular and trying to wrap my head around this new way of thinking. I can definitely solve this problem easy writing some javascript (capture the event, get the target, get the sibling, etc.) but this doesn't seem like the proper way to do it with angular.
So... what's the appropriate angular way to do this? Should I be writing a custom directive?
Simply create a directive with a new scope and have something like this in the HTML:
<div class="content-item">
<div class="" ng-class="{someClass:hovered}">My transparency should change.</div>
<a ng-mouseover="hovered = true">Mouseover me.</a>
</div>
PLUNKER
Note that if you use ngRepeat, it creates isolate scopes automatically and you don't need the directive.
Directive which founds siblings of the element on mouseover event. You can do what you want with the siblings then:
app.directive('mousiee',function(){
return{
restrict: 'A',
link: function(scope,elem,attrs){
var siblings;
elem.on('mouseover',function(){
siblings = $(elem.parent()).siblings();
console.log(siblings);
});
}
};
});
http://plnkr.co/edit/gWkNpiHMUEUBwuug9C3q?p=preview
(Note that I've added jQuery to your index.html)