We Keep Coding

Passing Dynamic Value to Angular Directive

I am trying to pass a dynamic value to a custom angular directive. I am generating the value from a function and I want it to be resolved before the directive resolves; a first cursory pass at this looked like this on a DOM element:
my-directive="{{ myfunction() }}"
This resulted in the DOM looking the way it should:
my-directive="MYRESULTS"
However I find that the directive isn't seeing these results when it is run; it appears to be triggered before the value is set. Is there some way I can seed a custom value for my directive? Any assistance is appreciated.

AngularJS - Create a directive that uses ng-model and md-autocomplete

I am trying to create a directive for md-autocomplete. I tried using the answer provide by AngularJS - Create a directive that uses ng-model, but it does not work for me.
My CodePen is here: http://codepen.io/colbroth/pen/QyMaQX/?editors=101.
The code is based on the Angular material demo for autocomplete at https://material.angularjs.org/latest/demo/autocomplete. I have multiple pages, which need an autocomplete field to select a state. I do not want to repeat the code for each web page component.
state-directive takes an md-autocomplete input, I need demoCtrl.selected state to reflect the same value in both cases. But when I update the input element, the state-directive does not reflect this and vice versa.
<input ng-model="demoCtrl.selectedState">
<state-directive ng-model="demoCtrl.selectedState">...</state-directive>

You are on the right track. Your problem is that your model is a string - a primitive in javascript but a ngModel always needs to be an object if you want to avoid these kind of problems.
Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved. (See this example for a quick illustration of the problem.)
This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models.
Taken from Understanding-Scopes
It also links to this Youtube video - 3 minutes of well invested time
function DemoCtrl() {
var self = this;
self.state = {
selected: "Maine"
};
}
Fixed codepen

Setting and getting bootstrap radio button inside angular repeat loop

I am trying to set the default button and get the current selected value.
The example without the repeat loop works.
Here is my plnkr:
http://plnkr.co/edit/t9CefA5bhLZs3RASmEUG?p=preview
It is based on this example:
http://plnkr.co/edit/LFj4inY9TLYZs9z7yHCr?p=preview
Thank you!

So, there were 2 things going on in your plunker.
Firstly the btn-radio attribute doesn't need interpolation ({{}}) you can (and should) provide an expression directly. So just write btn-radio="company.id" instead of btn-radio="{{company.id}}".
Secondly, you must know that the ng-repeat directive creates a new scope. This is a very, very common conceptual issue people have with AngularJS so I would encourage you to read https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance
Coming back to you particular problem you can either change you ng-model expression to point to a parent scope (ng-model="$parent.radioModel") or bind to an object property (ng-model="radioModel.id").
Here is a working plunk with the second approach:
http://plnkr.co/edit/uGAxaRlPFK6sD4tRjGXX?p=preview

Adding properties to all Knockout models

I have several knockout models, that I use on my website. Let's say for a given model I have a property
function modelA {
this.doSomething = function () { ... };
}
Now i want to use the doSomething() function in a different model. I would like to do this, such that I am not obligated to rewrite doSomething() in every single model that needs it. Ideally i would like it if this function becomes available as soon as ko.applyBindings(new modelX()) is called.
I know that i can have the functions inherit from a prototype, but that also leads repeated code in every single model. Is there a way to alter knockout.js to inject this property into all model objects?
EDIT:
In case there's a different approach that would achieve my desired goal, i'll elaborate on that desired goal. We use knockout-validation.js which allows me to call isValid() on every property in a model that has been extended with validation rules. I want to append a function to every model that will inspect the other properties in the model, and call isValid() on them. That way i can write a generic validation function that can be used with every model, without having to explicitly add it to the model.

You can add a custom function onto knockout's core datatypes. Alternatively you could look at extenders, and inside the extension you could add the function to an observable. Note, however, that both of these techniques address cross-cutting concerns at the "observable" level, not at the ViewModel level.
I would be curious to understand what doSomething is doing. Assuming that it has to access some observable(s) inside the ViewModel you should be able to reframe the problem so that the behaviour is attached to an observable.

this does not refer to viewmodel in binding from observableArray template

Trying to use the new cleaner event handling in Knockout 2 along with the new control flow bindings I'm working on implementing a simple dynamic list, adding and removing strings. So my markup roughly looks like this:
<div data-bind="foreach:myList">
<input data-bind="value: $data" />
<button data-bind="click:$parent.removeFromList">X</button>
</div>
and my viewmodel has a matching remove function which immitates a sample from Steve Sanderson.
removeFromList: function(item) {
this.myList.remove(item);
}
Now I would expect 'this' to refer to the viewmodel and item to refer to the array member being removed (since event handlers now receive the current model value as their first parameter). However, 'this' also seems to refer to the string being removed. Therefore when I click remove I get:
this.myList is undefined
I've created a JSFiddle at http://jsfiddle.net/davidc/rFd7H/ which illustrates my problem. How should I be removing items from the list?

There are many ways that you can ensure that your handler has the correct value for "this".
Build your view model in a function and use bind against the current this Sample: http://jsfiddle.net/rniemeyer/rFd7H/4/. Or don't build your view model in a function and use bind like: http://jsfiddle.net/rniemeyer/rFd7H/10/
Build your view model in a function and keep a variable with the correct value of this and use it in your handler. Sample: http://jsfiddle.net/rniemeyer/rFd7H/5/
Bind to the correct context within your binding like: data-bind="click: $parent.removeFromList.bind($parent)" Sample: http://jsfiddle.net/rniemeyer/rFd7H/8/
Call it as an anonymous function off of the $parent object like: data-bind="function() { $parent.removeFromList($data); }" Generally, not recommended, as it makes the markup ugly/verbose. Sample: http://jsfiddle.net/rniemeyer/rFd7H/9/