Suppose, I have controller:
angular.module('tf').controller('Ctrl', function($scope){
$scope.params = {
orderBy: null
};});
And a directive "common":
angular.module('tf').directive("common", function() {return {
restrict: 'E',
replace: true,
template: '<div><outer order-by="orderBy"><inner
order-by-field="name1"></inner><inner
order-by-field="name2"></inner></outer></div>',
controller: function ($scope) {
},
scope: {
orderBy: '='
},
link: function (scope, element, attrs) {
}}});
Controller is using directive within it's template:
<div ng-app="tf"><div ng-controller="Ctrl">
<common order-by="params.orderBy"></common>
<div style="color:red">{{params.orderBy}}</div></div>
This directive is using directive "outer":
angular.module('tf').directive("outer", function() {return {
restrict: 'E',
transclude: true,
replace: true,
template: '<div ng-transclude></div>',
controller: function ($scope) {
this.order = function (by) {
$scope.orderBy = by
};
},
scope: {
orderBy: '=',
}}});
Which is parent for the directive "inner":
angular.module('tf').directive("inner", function() {return {
require: '^outer',
restrict: 'E',
transclude: true,
replace: true,
template: '<div ng-click="onClicked()">{{orderByField}}</div>',
controller: function ($scope) {
$scope.onClicked = function () {
$scope.outer.order($scope.orderByField);
}
},
scope: {
orderByField: '@'
},
link: function (scope, element, attrs, outer) {
scope.outer = outer;
}}});
The directive "outer" shares "order" method with directive "inner" by it's
controller. The directive "inner" is accessing it by using "require"
mechanism.
For some reason, this is not working as expected. If I place "orderBy" into
object (e.g. {"order": {"by": null }} ) and use object instead of string
value, everything is working as expected. I know about "always use dots"
best practices principle, but I don't wanna use it here, because it would
make my directive's API less intuitive.
Here is jsfiddle: http://jsfiddle.net/A8Vgk/1254/
Thanks
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
