Develop Reference

Directive can't use data resolved by a controller

Consider the initial app main state:
$stateProvider.state('main', {
url: '',
views: {
'nav#': {
templateUrl: baseTemplatesUrl + 'nav.main.html',
controllerAs: 'vm',
controller: 'mainNavController',
resolve: {
timelinesService: 'timelinesService'
}
},
'content#': {
template: ''
}
}
});
Inside the nav.main.html template I'm trying to use a simple slider directive:
<ul>
<li ng-repeat="t in vm.timelines">
<!-- ui-sref=".timeline({yearFrom: t.yearFrom, yearTo: t.yearTo})" -->
<a class="button tiny" ui-sref-active="active">{{t.text}}</a>
</li>
</ul>
<div simple-slider items="vm.timelines" on-item-clicked="vm.timelineClicked"></div>
The directive is defined as:
function simpleSlider() {
return {
restrict: 'EA',
templateUrl: baseTemplatesUrl + 'directive.simpleSlider.html',
replace: true,
scope: {
items: '=',
onItemClicked: '&'
},
link: function(scope, el, attr, ctrl) {
scope.curIndex = 0;
scope.next = function() {
scope.curIndex < scope.items.length - 1 ? scope.curIndex++ : scope.curIndex = 0;
};
scope.prev = function() {
scope.curIndex > 0 ? scope.curIndex-- : scope.curIndex = scope.items.length - 1;
};
scope.$watch('curIndex', function() {
scope.items.forEach(function(item) {
item.active = false;
});
scope.items[scope.curIndex].active = true;
});
},
};
}
The problem
On a page load the directive's $watch throws an exception saying that scope.items[scope.curIndex] is undefined, whereas the ng-repeat="t in vm.timelines" inside the nav.main.html template renders successfully.
Why the watch fails / how to pass vm.timelines to directive's scope?
The fiddle
https://jsfiddle.net/challenger/Le5p9aup/
Update 1. Regarding #Lex answer
The fiddle is working. But my setup differs from the given fiddle. In my setup the timelinesService returns the $http promise:
var service = {
getTimelines: function() {
return $http.get('/api/timelines');
}
};
then inside the navMainController the vm.timelines array gets populated:
vm.timelines = [];
timelinesService.getTimelines().then(function(response) {
vm.timelines = response.data.timelines;
}).catch(function(error) {
console.log(error);
});
Then, unless you click the directive's prev/next button, the $watch will fail:
// scope.items[scope.curIndex] is undefined
scope.items[scope.curIndex].active = true;

Bind a property from one directive to another

I'm trying to use "Component approach" from Angular2 in Angular1, and my directives should send properties to each other. I've written code like this:
Parent directive
angular
.module('myModule')
.controller('parentController', ParentController)
.directive('parentDirective', () => {
return {
restrict: 'E',
scope: {},
controller: 'parentController',
controllerAs: 'ctrl',
templateUrl: 'parent-template.html'
}
});
class ParentController {
constructor() {
this._increasableValue = 0;
setInterval(() => {
this._increasableValue += 1;
})
}
get increasableValue() { return this._increasableValue; }
}
parent-template.html
<div class="container">
<child-directive inc="{{ctrl.increasableValue}}"></child-directive>
</div>
Child directive
angular
.module('myModule')
.controller('childController', ChildController)
.directive('childDirective', () => {
return {
restrict: 'E',
scope: {
increasableValue: '#inc'
},
bindToController: true,
controller: 'childController',
controllerAs: 'ctrl',
templateUrl: 'child-template.html'
}
});
class ChildController {
set increasableValue(value) { this._increasableValue = value; }
get increasableValue() { return this._increasableValue; }
}
child-template.html
<div class="container">
<div>{{ctrl.increasableValue}}</div>
</div>
But the increasableValue freezes on start value and do not changes at all. What should be done to get increasableValue from parent directive and bind it to child?
UPD:
Here is jsfiddle to demonstrate problem (look at the console too).

Yes you right! Problem is how you update your variable.
Angular not know, that value changed, and not call digest loop to update view.
Sample with $inteval service
angular.module('myModule', []);
var ParentController = (() => {
function ParentController($interval) {
this._increasableValue = 1;
var interval = $interval(() => {
this._increasableValue += 1;
console.log(this._increasableValue);
if (this._increasableValue > 20) {
$interval.cancel(interval);
}
}, 1000);
}
Object.defineProperty(ParentController.prototype, "increasableValue", {
get: function () { return this._increasableValue; },
enumerable: true,
configurable: true
});
return ParentController;
})()
var ChildController = (() => {
function ChildController() {}
Object.defineProperty(ChildController.prototype, "increasableValue", {
get: function () { return this._increasableValue; },
set: function (value) { this._increasableValue = value; },
enumerable: true,
configurable: true
});
return ChildController;
})();
angular
.module('myModule')
.controller('parentController', ParentController)
.directive('parentDirective', () => {
return {
restrict: 'E',
scope: {},
controller: 'parentController',
controllerAs: 'ctrl',
template: `
<div class="container">
<child-directive inc="ctrl.increasableValue"></child-directive>
</div>`
}
});
angular
.module('myModule')
.controller('childController', ChildController)
.directive('childDirective', () => {
return {
restrict: 'E',
scope: {
increasableValue: '=inc'
},
bindToController: true,
controller: 'childController',
controllerAs: 'ctrl',
template: `
<div class="container">
<div>{{ctrl.increasableValue}}</div>
</div>`
}
});
angular.bootstrap(document.getElementById('wrapper'), ['myModule'])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div id="wrapper">
<parent-directive>Loading...</parent-directive>
</div>
UPDATE: Or you can simple call $digest function like this
angular.module('myModule', []);
var ParentController = (() => {
function ParentController($scope) {
this._increasableValue = 1;
var interval = setInterval(() => {
this._increasableValue += 1;
console.log(this._increasableValue);
$scope.$digest();
if (this._increasableValue > 5) {
clearInterval(interval);
}
}, 1000);
}
Object.defineProperty(ParentController.prototype, "increasableValue", {
get: function () { return this._increasableValue; },
enumerable: true,
configurable: true
});
return ParentController;
})()
var ChildController = (() => {
function ChildController() {}
Object.defineProperty(ChildController.prototype, "increasableValue", {
get: function () { return this._increasableValue; },
set: function (value) { this._increasableValue = value; },
enumerable: true,
configurable: true
});
return ChildController;
})();
angular
.module('myModule')
.controller('parentController', ParentController)
.directive('parentDirective', () => {
return {
restrict: 'E',
scope: {},
controller: 'parentController',
controllerAs: 'ctrl',
template: `
<div class="container">
<child-directive inc="ctrl.increasableValue"></child-directive>
</div>`
}
});
angular
.module('myModule')
.controller('childController', ChildController)
.directive('childDirective', () => {
return {
restrict: 'E',
scope: {
increasableValue: '=inc'
},
bindToController: true,
controller: 'childController',
controllerAs: 'ctrl',
template: `
<div class="container">
<div>{{ctrl.increasableValue}}</div>
</div>`
}
});
angular.bootstrap(document.getElementById('wrapper'), ['myModule'])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div id="wrapper">
<parent-directive>Loading...</parent-directive>
</div>

It seems that the dragons were in setInterval approach. Changing it to a button with ng-click attribute solved my problem. Here is updated jsfiddle.
I will be grateful if someone explain the root of the problem.

AngularJS: Using ViewModel-Variables in Callback of Directive-Controller

I'm trying to build a directive with a controller, which updates a ViewModel-variable and calls a callback-function. In the callback-function the updated variable should be used, but it still got the old value.
HTML:
<div ng-app="app" ng-controller="AppCtrl">
Var: {{vm.var}}
<ng-element var="vm.var" func="vm.func()"></ng-element>
</div>
JavaScript:
var app = angular.module('app', []);
app.controller('AppCtrl', function($scope) {
$scope.vm = {
var: 'One',
func: function() {
alert($scope.vm.var);
}
};
});
app.directive('ngElement', function(){
return {
restrict: 'E',
scope: true,
bindToController: {
var: '=',
func: '&'
},
controllerAs: 'ctrl',
replace: true,
template: '<button ng-click="ctrl.doIt()">Do it</button>',
controller: function() {
this.doIt = function() {
this.var = 'Two';
this.func();
};
}
};
});
So when clicking the button, doIt() ist called, updates var and calls func(). But when func() is executed, var still got the old value "One". Right after the execution the ViewModel gets updated and the value is "Two".
Is there any way to update the ViewModel before executing the function?
JSFiddle

Not sure exactly what your directive is doing, as I've never used bindToController, but this seemed to work:
directive('ngElement', function () {
return {
restrict: 'E',
scope: {
var: '=',
func: '&'
},
replace: true,
template: '<button ng-click="doIt()">Do it</button>',
controller: ['$scope', '$timeout', function($scope, $timeout) {
$scope.doIt = function() {
$scope.var = 'Two';
$timeout(function () {
$scope.func();
});
};
}]
};
});

How do I inherit properties from parent directive when using the controller as syntax?

I want to use the Controller As syntax in my Angular directives for two reasons. It's more plain JS and there's no dependency on the $scope service which will not be available in Angular 2.0.
It works great for a single directive but I cannot figure out how to print a property from the controller of a parent directive in a child directive.
function parentCtrl () {
this.greeting = { hello: 'world' };
}
function childCtrl () {}
angular.module('app', [])
.controller('parentCtrl', parentCtrl)
.controller('childCtrl', childCtrl)
.directive('myParent', function () {
return {
scope: {},
bindToController: true,
controller: 'parentCtrl',
controllerAs: 'parent',
template: '<my-child></my-child>'
}
})
.directive('myChild', function () {
return {
scope: {
greeting: '='
},
bindToController: true,
controller: 'childCtrl',
controllerAs: 'child',
template: '<p>{{ greeting.hello }}</p>'
}
});

You have to require the parent controller, the use the link function to inject the parent to the child. The myChild directive would become:
.directive('myChild', function () {
return {
scope: {
// greeting: '=' // NO NEED FOR THIS; USED FROM PARENT
},
bindToController: true, // UNNECESSARY HERE, THERE ARE NO SCOPE PROPS
controller: 'childCtrl',
controllerAs: 'child',
template: '<p>{{ child.greeting.hello }}</p>', // PREFIX WITH VALUE
// OF `controllerAs`
require: ['myChild', '^myParent'],
link: function(scope, elem, attrs, ctrls) {
var myChild = ctrls[0], myParent = ctrls[1];
myChild.greeting = myParent.greeting;
}
}
});

I found that you can use element attributes to pass properties from the parent directive controller's scope to a child.
function parentCtrl () {
this.greeting = 'Hello world!';
}
function myParentDirective () {
return {
scope: {},
controller: 'parentCtrl',
controllerAs: 'ctrl',
template: '<my-child greeting="ctrl.greeting"></my-child>'
}
}
function childCtrl () {}
function myChildDirective () {
return {
scope: {
greeting: '='
},
bindToController: true,
controller: 'childCtrl',
controllerAs: 'ctrl',
template: '<p>{{ ctrl.greeting }}</p><input ng-model="ctrl.greeting" />'
}
}
angular.module('parent', [])
.controller('parentCtrl', parentCtrl)
.directive('myParent', myParentDirective);
angular.module('child', [])
.controller('childCtrl', childCtrl)
.directive('myChild', myChildDirective);
angular.module('app', ['parent', 'child']);

Nested angular directives with typescript

Is it possible to use Typescript with nested angular directives?
http://jsfiddle.net/mrajcok/StXFK/
<div ng-controller="MyCtrl">
<div screen>
<div component>
<div widget>
<button ng-click="widgetIt()">Woo Hoo</button>
</div>
</div>
</div>
</div>
How would the following Javascript look as typescript code?
var myApp = angular.module('myApp',[])
.directive('screen', function() {
return {
scope: true,
controller: function() {
this.doSomethingScreeny = function() {
alert("screeny!");
}
}
}
})
.directive('component', function() {
return {
scope: true,
require: '^screen',
controller: function($scope) {
this.componentFunction = function() {
$scope.screenCtrl.doSomethingScreeny();
}
},
link: function(scope, element, attrs, screenCtrl) {
scope.screenCtrl = screenCtrl
}
}
})
.directive('widget', function() {
return {
scope: true,
require: "^component",
link: function(scope, element, attrs, componentCtrl) {
scope.widgetIt = function() {
componentCtrl.componentFunction();
};
}
}
})
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
}

That code should work just as it is. However as a better practice you could use TypeScript classes for controllers if they become too large http://www.youtube.com/watch?v=WdtVn_8K17E&hd=1