We Keep Coding

AngularJS Directive binding to controller

I'm trying to figure out AngularJS directives. I've got the following JSFiddle with an example of something I'm trying to do. https://jsfiddle.net/7smor9o4/
As you can see in the example, I expect the vm.alsoId variable to be equal to vm.theId. In the template vm.theId displays the correct value but vm.alsoId does not.
What am I doing wrong? How could I accomplish my goal.
If it helps the final idea is to execute something as the following:
function directive(service) {
var vm = this;
vm.entity = null;
init();
function init() {
service.getEntity(vm.theId).then(function (entity) {
vm.entity = entity;
});
}
}

As you've noticed, the bindToController bindings are not immediately available in the controller's constructor function (unlike $scope, which are). What you're looking for is a feature introduced with Angular 1.5: Lifecycle Hooks, and specifically $onInit.
You had the right idea; simply replace your init function definition and invocation as follows:
vm.$onInit = function () {
service.getEntity(vm.theId).then(function (entity) {
vm.entity = entity;
});
};
And here is your updated fiddle.
(Alternatively, without this solution, you'd have needed a watch.)

Angular recommends that you bind a controller "only when you want to expose an API to other directives. Otherwise use link."
Here's a working fiddle using the link function.
angular.module('app', [])
.directive('directive', directive);
angular.element(function() {
angular.bootstrap(document, ['app']);
});
function directive() {
return {
restrict: 'E',
scope: {
theId: '<'
},
template: `
alsoId: <span ng-bind="alsoId"></span>
theId: <span ng-bind="theId"></span>`,
link: link
};
}
function link(scope, element, attrs) {
init();
function init() {
scope.alsoId = scope.theId;
}
}

Angular directive: whats the difference between scope in controller vs scope in link function?

Im learning about Angular directives and I can't wrap my head around the scope topic. Suppose I have this custom directive which is named parentDirective. It has a controller property and a link property, as follows:
angular.module("app").directive("parentDirective", function () {
return {
restrict: "E",
templateUrl: "dirs/parent.html",
scope:{
character: "="
},
controller: function ($scope) {
$scope.getData = function (data) {
console.log(data);
}
},
link: function (scope,elem, attrs) {
elem.bind("click", function (e) {
//get object here?
});
scope.getData = function (data) {
console.log(data);
}
}
}
});
Its template is defined as follows:
<p ng-click="getData(character)">
{{character.name}}
</p>
I can get the character object in the controller function through the $scope variable and I have access to the same data in the link function through scope. Whats the difference between the two methods in this regard? Second question, Is it possible to bind a click to the directive and get the object like this:
elem.bind("click", function (e) {
//get object here?
});

Scope is specific to current directive instance and is the same object in both functions.
For defining methods on the scope, there's no difference if they are defined in controller or link function, unless there is race condition that requires the method to be defined as early as possible. For this reason it makes sense to define scope methods in controller.
Event handler doesn't differ from any other function, it is
elem.on("click", function (e) {
scope.$apply(function () {
scope.character...
});
});
scope.$apply(...) wrapper doesn't hurt anyway, but the necessity of it depends on what happens with scope.character.
The directive can have only controller and no link. Current Angular versions (1.5+) suggest the style where bindToController + controllerAs are used instead of scope bindings as common ground for directives and components.
Then the directive may look like
restrict: "E",
template: '<p>{{$ctrl.character.name}}</p>',
controllerAs: '$ctrl',
bindToController: { character: "=" },
controller: function ($element, $scope) {
var self = this;
self.getData = function (data) { ... };
$element.on("click", function (e) {
scope.$apply(function () {
self.character...
});
});
}
link function may appear as $postLink controller hook, but here it is not needed.

AngularJS: Accessing an element directive's attributes from within a controller

Problem: The attribute I pass to my directive's controller is not evaluated. For example, I get {{ attribute.value }} instead of 5.
Desired Outcome: My directive's controller has access to a primary key contained in an object from a parent controller. I need it to make API calls like MyResource.save({id: attribute});.
Code Snippets:
Calling directive from HTML
<div ng-controller="BoatDetailController as boatCtrl">
<div class="row">
<booking-widget boat-id="{{ boatCtrl.boat.id }}"></booking-widget>
</div>
Directive
(function () {
'use strict';
angular.
module('trips').
directive('bookingWidget', bookingWidget);
bookingWidget.$inject = [];
function bookingWidget() {
return {
restrict: 'E',
scope: {
boatId: '#'
},
templateUrl: "/static/app/trips/trips.bookingwidget.template.html",
controller: 'BookingWidgetController as bookingCtrl'
}
}
})();
Controller
(function () {
'use strict';
angular.
module('trips').
controller('BookingWidgetController', BookingWidgetController);
BookingWidgetController.$inject = ['Trip', 'Booking', 'Messages', '$scope', '$attrs'];
function BookingWidgetController(Trip, Booking, Messages, $scope, $attrs) {
var vm = this;
vm.boatId = $attrs.boatId;
...
activate();
//////////////////////////////
function activate() {
console.log(vm.boatId);
//
}
Console Results:
With $scope.boatId: (logs a blank line)
With $attrs.boatId: {{ boatCtrl.boat.id }} (a string)
Recap: The boat-id attribute of my directive is not resolving. Can you help me figure out how to fix it?

You can actually create a custom directive like this:
function bookingWidget() {
return {
restrict: 'E',
scope: {
boatId: '#'
},
templateUrl: "/static/app/trips/trips.bookingwidget.template.html",
controller: 'BookingWidgetController as bookingCtrl',
link : function(scope, element, attrs, controller){
console.log(attrs.boatId);
scope.boatId = attrs.boatId;
}
}
}
The link function actually allows you to have an access to the element, the scope of the directive, the attributes associated to the directive and the controller of the directive. The function is called after everything associated to the directive has been performed. In other words, this is the last stage.
The same scope would be shareable between the link function and controller.
Now, to make the API call, you may actually add a function in your controller that accepts the boatID, makes a call to the API and accepts the response onto the controller object. After that, add a watcher within the link function that watches over "vm.boatId", within which you may call that function which makes the API call. So, even if the controller has initialized before the link function, you would still be able to perform what you wish to. So, it would be a "link-based activation".
You may give this solution a try. Hope it helps.

You can pass a function and call it. Need to use & then.
https://thinkster.io/egghead/isolate-scope-am

How can I spy on ngModel?

The problem
I am unit testing a directive has no controller or template, only a link function. The directive requires ngModel and calls one of its functions in the link function. I want to spy on ngModel in my unit tests to ensure the right function is being called.
The code
Directive:
angular.module('some-module').directive('someDirective', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, controller) {
controller.doSomething(); //Calls some random function on the ngModel controller
}
};
});
What I've tried
I've tried to inject a spy ngModel like this:
beforeEach(module(function($provide) {
$provide.factory('ngModelDirective', function() {
return {};
});
$provide.factory('ngModelController', function() {
return function() {};
});
}));
As I discovered on this question, trying to override built-in properties causes an error to be thrown, and is bad practice.
So then I tried to test the directive the way the Angular docs say to:
var $scope = $rootScope.$new();
var element = $compile('<div some-directive></div>')($scope);
And spy on NgModelController like this:
var ngModelControllerSpyDoSomething = sinon.spy(element.controller('ngModel'), 'doSomething');
But this doesn't work, because one $compile is run, it executes the link function, so I'm not spying on it until it's too late (the spy is coming back as never having been called). This is also the case if I put $scope.$digest(); before or after creating the spy.

You will have to add your spy to the $scope you are injecting into the $compile-Function and then link it within the actual directives HTMLngModel`, so:
var $scope = $rootScope.$new();
$scope.mySpy = // create a stub function with sinon here
var element = $compile('<div some-directive ng-model="mySpy"></div>')($scope);

What is angularjs $compile double parenthesis

I 'm a bit worried If I am asking a noob question or if it is a javascript feature that I haven't been able to locate despite plenty of googling
I am adding a simple directive programmatically using $compile and all is working fine.
My question is this line
var el = $compile(newElement)($scope);
How do the double parenthesis work/ what do they do? Complete code below for reference but its just the parenthesis which I am not sure about.
var myApp = angular.module('myApp', []);
myApp.directive('myDirective', function() {
return {
template: 'Hello',
restrict: 'E'
}
});
myApp.controller('mainController', [
'$scope', '$compile', function($scope, $compile) {
$scope.addDirective = function() {
var newElement = angular.element(document.createElement('my-directive'));
var el = $compile(newElement)($scope);
angular.element(document.body).append(el);
};
}
]);

$compile returns another function. You can do something similarly:
function foo(greeting) {
return function(target) { console.log(greeting, target) };
}
foo('Hello, ')('world');

As you already know that parenthesis in javascript is an function invocation operator (and also grouping). In other words, with () operator you call a function. From here it is clear that the code
$compile(newElement)($scope);
means that result of $compile(newElement) is a function, so it can be executed. This returned function accepts one parameter - a scope object in which context new DOM element should be compiled.

$compile(tElement, tAttrs, transclude) returns the Directive link: (post-link) function.
app.directive('exampleDirective', [function () {
return {
restrict: 'A',
scope: { value: '=value'},
template: template,
link: function (scope, element, attr) {
scope.count = 0;
scope.increment = function() {
scope.value++;
};
}
};
}]);
In this case, $compile('<div example-directive></div>'); will return the link: function so you can call it with arguments (scope as first) and instanciate the context.

It's all just standard Javascript syntax for calling functions. What might be confusing is that $compile is a function that returns a function. So
$compile(newElement)
is itself function, and can be called like any other function, which is what's happening when writing
$compile(newElement)($scope);
You can break this up into separate lines if you wish, which might make it clearer:
var linkFunction = $compile(newElement);
linkFunction($scope);
You can refer to the usage of $compile in the docs.
As a side-note, I would be wary of using $compile directly: you might be overcomplicating things, and there could be simpler alternatives (it has been very rare that I've ever had to use it).