I've watched this video and I've got a question which I can't find an answer to. There is a plunker http://plnkr.co/edit/L8OMoB?p=preview
HTML
<div ng-app="app">
<div ng-controller="MyCtrl">
<my-select-view on="color">
<my-view label="Red" value="red"><span class="red-text">Red Content</span></my-view>
<my-view label="Blue" value="blue"><span class="blue-text">Blue Content</span></my-view>
<my-view label="Green" value="green"><span class="green-text">Green Content</span></my-view>
<my-view label="Something" value="something"><span class="something-text">Something Content</span></my-view>
</my-select-view>
</div>
</div>
JS
angular.module('app', ['ngSanitize'])
.directive("mySelectView", function($compile) {
return {
restrict: "E",
scope: { item : "=on"},
controller: function($scope, $element) {
$scope.views = [];
this.addView = function(label, value, content) {
$scope.views.push({ label: label, value: value, content: content });
}
},
link: function(scope, element, attrs, ctrl) {
var selectTpl = "<select ng-model='item'" +
" ng-options='view.value as view.label for view in views'" +
" ng-change='changeView()'></select>";
...
}
}
})
.directive("myView", function() {
return {
restrict: "E",
require: "^mySelectView",
link: function(scope, element, attrs, ctrl) {
ctrl.addView(attrs.label, attrs.value, element.html());
}
};
})
.controller("MyCtrl", function($scope) {
$scope.color = "something";
});
I would like to know one thing. We got directive "mySelectView", which contains "link" function. This "link" function depends on "views" variable to be defined and contain something.
The only way for it to get it is by calling a "link" function on other directive "myView". This directive have a require parameter to previous directive.
So my question is: How does "link" function of directive "mySelectView" executed after "link" function of directive "myView". I assuming this because of "ng-option" attribute which needs $scope.views in order to properly display things. This means link function of "myView" get executed and added views.
But how? Who deciding order on this? Why would "link" function of first directive just not happily fail because of undefined $scope.views?
Any help would be appreciated!