Plunkr: http://plnkr.co/edit/9LcYbn1468miu5McgPqR?p=preview
I can add the form to the variable inside the options parameter passed, but I would like to bind it to something other than an internal parameter.
I have a panel directive that creates a panel. As part of the panel options, I can specify the directive that the panel should dynamically call:
(function (ng, app) { "use strict"; app.directive( "panel", function ($compile) { return { scope: { options: '=', }, link: function(scope, element, attrs) { el = angular.element('<' + scope.options.Directive + ' options=\'' + JSON.stringify(scope.options.DirectiveOptions) + '\' ' + additionalOptionsString + '></>'); element.find(".panel-body").append(el); $compile(el)(scope); }, templateUrl: function (elem, attr) { return '/Panel.html'; }, } }); })(angular, app);
This works fine and dynamically creates the directive I want without much concern. Now I have another directive, which consists of another panel, and inside another directive. Both have isolated areas. Therefore, I have:
Panel Directive Panel OtherDirective
I want to pass the parameter of additional parameters to the "Other Directive" so that the data in the "Other Directive" is available for the "Directive". The parameters, as you can see above, from the panel code, now turn into json and are currently "hard-coded" by the panel. But this additional scope variable is a string and it turns out like:
<OtherDirective options='{"hardCodedJson": "Value"} ' scopeVariableToBind='VariableInDirective'></OtherDirective>
the variable 'VariableInDirective' is not bound by OtherDirective. Here are some codes for these two directives:
(function (ng, app) { "use strict"; app.directive( "directive", function () { return { scope: { options: '=', }, controller: function ($scope) { $scope.Comment; $scope.OtherDirectiveOptions= { showcreatebutton: false, }; $scope.OtherDirectivePanelOptions = { Id: $scope.options.Id, Title: $scope.options.Title + " Comment", Directive: "otherdirective", DirectiveOptions: $scope.OtherDirectiveOptions, //This gets serialized by the panel and essentially "hard coded" test: true, AdditionalOptions: { "scopevariabletobindto": "VariableInThisScope" } } $scope.test = function () { //Function used to see if the variable in this scope was set debugger; } }, templateUrl: function (elem, attr) { return '/Directive.html'; }, } }); })(angular, App);
Another directive that has the form that I want to associate with the area above the variable. Essentially, I want to be able to bind variables that move through nested controls so that I can access them hierarchically:
(function (ng, app) { "use strict"; app.directive( "otherdirective", function ($compile) { return { scope: { options: '=', //Have tried scopevariabletobindto: '=form': no luck, have tried a lot of different combinations. scopevariabletobindto: '=', }, controller: function ($scope, $element) { $scope.id = $element.parent()[0].id; //I want this form in this directive to bind to scopevariabletobindto. $scope.form = {}; //Have even tried to set it manually like $scope.scopevariabletobindto = { "test" : "test"} with no luck templateUrl: function (elem, attr) { return '/OtherDirective.html'; }, } }); })(angular, app);
I want to bind this form to the scope variable passed in 'scopevariabletobindto', but I can't get it to bind at all. Any ideas why?
Edit:
It seems that you really can pass the form property as a function, and it works with the and symbol.