AngularJS: with one controller
I have a directive that wraps another like this:
<div direction from="origin" to="destination">
<div direction-map line-color="#e84c3d"></div>
</div>
the directive is direction-map
translated, see my code ( Script available here ):
var directionController = function() {
//do stuffs
};
var directionMapController = function() {
//do other stuffs
};
var Direction = angular.module("direction", [])
.controller("directionController", directionController)
.controller("directionMapController", directionMapController)
.directive("direction", function() {
var directive = {
restrict: "AEC",
controller: "directionController",
scope: {},
transclude: true,
link: {
pre: function($scope, $element, attrs, controller, transclude) {
console.log("direction controller is directionController : ");
console.log(controller.constructor === directionController);//true, that ok
transclude($scope, function(clone) {
$element.append(clone);
});
}
}
};
return directive;
})
.directive("directionMap", function() {
var directive = {
require: "^direction",
controller: "directionMapController",
restrict: "AEC",
scope: true,
link: {
pre: function($scope, $element, $attrs, controller) {
console.log("directionMap controller is directionMapController :");
console.log(controller.constructor===directionMapController);//false that not OK!!!!
}
}
};
return directive;
});
So my question is:
Why direction-map
does my child directive receive its parent's controller as a parameter (I think because it is being translated), can this be avoided or should I just revisit my code?
+3
source to share