We Keep Coding

Pass value from Child to Parent in svelte - Intuition for the bind directive

This is a super simple question, yet it bothers me that I am not completely understanding what is happening here, because I really like svelte and want to understand it.
There is this awesome video about passing data from a child to a parent:
https://www.youtube.com/watch?v=lqvY_0gJf_I&list=PLoWoeRXn334kDuFrZqIqHrFCN71fSZE4X&index=1&t=1804s
Their first way of doing it id the two-way data binding.
It essentially works as in this REPL https://svelte.dev/repl/24adfb0a93734265952e2870155aeb49?version=3.43.1
I simply do not fully understand the flow of the data here (and in svelte in general). If I change something in the rendered Input-field this means essentially that I am changing something in the child, right? In this case I assume the
thing that happens is that the person variable in the child is changed by the user
As it has the bind directive, it somehow passes this data from the child to the parent
In the parent, the instance of the child component is initialized with passing the value of p (a variable initialized in the parent with a value) to the exported variable person from the child
somehow the variable p is changed in the parent by modyfing the value in the child and a reactive value in the child (the variable upper) is updated.
Now my question is: Why is this variable p updated and is there any intuitive understanding of this bind:<variable> directive. I simply can't wrap my head around it.
I think there are also other possibilities to pass data from a child to a parent (like with event dispatching). But lets start with this one;)
//App.svelte
<script>
import Box from './inp.svelte'
let p = 'MyName'
$: nameUpper = p.toUpperCase()
</script>
<Box bind:person={p} />
<p>Reactive value in the parent component: {nameUpper}</p>
<hr />
// inp.svelte
<script>
export let person = 'valueInChild'
</script>
<input type="text" placeholder="put the name here" bind:value={person} />

To intuitively understand you just have to imagine that both the child and the parent are referring to the same object.
Note that in your example if you add the following to App.svelte
<input type="text" placeholder="put the name here" bind:value={p} />
you'll see that updating the value in the parent also shows up the child. So the best way to understanding the bind: directive is that it doesn't make a copy, it really is one and the same object/value/reference... in both parent and child.

AngularJs (1.5+) dynamic binding

We are developing our own library of AngularJs (1.6.x) components/directives and we would like to have all HTML attributes that are specified on our components automatically and dynamically passed on to the underlying templates, without having to specify every single attribute as a binding.
For example, if I have a component like <my-component> with a template like <div class="my-component"></div> and I write in my HTML:
<my-component ng-required="ctrl.isRequired" ng-change="ctrl.onChange()" ng-attr-disabled="ctrl.isReadOnly"></my-component>
I want my template to render:
<div class="my-component" ng-required="ctrl.isRequired" ng-change="ctrl.onChange()" ng-attr-disabled="ctrl.isReadOnly"></div>
As I said above, we cannot know in advance all attributes, so they can't all be defined in the component bindings. The problem gets more complicated in Angular 1.5+, because replace has been deprecated, so the above template would render something like this:
<my-component ng-required="ctrl.isRequired" ng-change="ctrl.onChange()" ng-attr-disabled="ctrl.isReadOnly">
<div class="my-component" ng-required="ctrl.isRequired" ng-change="ctrl.onChange()" ng-attr-disabled="ctrl.isReadOnly"></div>
</my-component>
And also, when we have nested, deep hierarchies of components, we want the values to be passed down from the parent controllers to the (grand)children, i.e. the ctrl.onChange() method will be defined in the scope of the page controller where <my-component> is defined, but as each component in the hierarchy gets its own scope, as you go deeper, we want the method to still be callable.
I am relatively new to Angular, I hope the above make sense.

Ng-if on directives with two way bindings that override functions

I've set up a directive that will take in a function from the parent controller as one of it's attributes. This function will be replaced by the directives controller and will be accessible by the parent controller by using the passed function. The issue I'm running into is when placing an ng-if attribute on the directive the passed in function is not being replaced anymore. What causes this and how would I go about fixing this issue? I've attached an example
https://jsfiddle.net/dh7jt1zg/1/
<div class="parent" ng-controller="pCtrl">
<h3>Parent - with ng-if</h3>
<div>{{parentHelloWorld()}}</div>
<child ng-if="testBool" rep-fun="parentHelloWorld"></child>
</div>
<br/>
<div class="parent" ng-controller="pCtrl2">
<h3>Parent2 - without ng-if</h3>
<div>{{parentHelloWorld()}}</div>
<child rep-fun="parentHelloWorld"></child>
</div>

Use ng-show instead of ng-if.
ng-if causes element to remove from the DOM.

I think you'd be better off to create a service instead of replacing the function in the child controller. That seems kind of messy to me.
Personally, I'd use a service to register the function and then you can use that same service from the parent controller to call it.

$watch not detecting model change with checkbox

I'm trying to do something relatively simple in angular and I can't figure out why it's not working. Ultimately I just want to perform one function when a checkbox is checked and then a different function when it's unchecked.
So I tried to use ng-model to evaluate foo to true or false if the checkbox is checked or unchecked and then I could do an if statement to pick a function. The {{foo}} in my view switches to true/false but the console.log always says undefined. Anyone know why?
HTML:
<div ng-repeat="element in elements">
<input type="checkbox" ng-model="foo" /> {{foo}}
</div>
Script:
$scope.$watch('foo', function(){
console.log($scope.foo);
});
EDIT: Oops! I had it in a repeat. Is there a way to achieve this effect inside a repeat?

What you did
Your watcher is outside the ngRepeat. Your ngModel is inside the ngRepeat.
What is wrong
The inner ngModel creates a foo property on the inner scope. Your watcher reads the not existing foo property of the outer scope.
Solution
Have a model object for example, attached to your outer scope
$scope.model = { foo: false };
Have the inner ngModel set to model.foo.
What is the difference ?
Using this solution, the ngModel gets the right model object because of scope inheritance, what it does not try to do when assigning the foo property without traversing the prototype chain in what you wrote.

AngularJS - ng-repeat and ng-show

I got the following code:
<div class="map" ng-controller="DealerMarkerListCtrl">
<a ng-click="showdetails=!showdetails" href="#/dealer/{{marker.id}}" class="marker" style="left:{{marker.left}}px;top:{{marker.top}}px" ng-repeat="marker in dealer"></a>
</div>
and this view:
<div ng-show="showdetails" class="alldealermodal">
<div ng-view></div>
</div>
This same "ng-show" stuff is working properly with just one link outside of the ng-repeat but in this ng-repeat it isn't working.
The link shall open an overlay. The ng-view works too.
What am I missing?

Since ngRepeat creates a new scope the showdetails being referenced outside of your ng-repeat is not the same instance as the showdetails being updated in your repeated ng-click.
You can see this post for more details but one way around the new scope(s) is to bind to an object property instead of a primitive type.
This fiddle shows a small example binding to details.show instead of showdetails with:
$scope.details = { show: true };

"What am I missing?"
As #Gloopy already mentioned, you probably didn't realize that ng-repeat creates child scopes (one for each item). In addition, an understanding about how JavaScript prototypal inheritance works is also necessary because each child scope prototypically inherits from the same parent scope, and that affects how JavaScript finds (or creates) properties on scopes.
Note that a number of Angular built-in directives create child scopes: ng-repeat, ng-include, ng-switch, ng-controller, directives (can, but may not). For (much) more information about how prototypal inheritance works, why it is a problem when trying to bind to primitives, and how it relates to Angular scopes, see here.
To extend #Gloopy's answer, there are two other alternatives you could consider:
use $parent inside the ng-repeat to bind to the parent scope property (instead of creating child scope properties):
<a ng-click="$parent.showdetails=!$parent.showdetails" ...
define a method on the parent scope and call it, thereby also changing a parent scope property (rather than a child scope properties):
<a ng-click="toggleDetails()" ...